Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Merubah CSS dengan JavaScript / JQuery

Cara merubah CSS menggunakan JavaScript atau JQuery
Merubah CSS dengan JavaScript / JQuery - Beberapa hari kebelakang ada sahabat yang bertanya bagai mana cara mengganti otomatis clear:both pada gambar posting menjadi clear:left. Untuk mengganti secara manual, mudah saja tinggal masuk ke editor postingan dan ganti kodenya. Tapi bagaimana kalau postingannya ada 1000? pasti keriting tuh jari :D Solusinya harus menggunakan JavaScript atau JQuery untuk merubah kode CSS tersebut.javascript

Sebagai catatan untuk saya pribadi dan sekaligus berbagi, mungkin sobat satu saat membutuhkannya, saya share bagaimana mengganti CSS dengan JavaScript atau dengan JQuery.

Sebagai contoh, saya punya kotak berwarna kuning, dengan tulisan putih, dengan CSS seperti ini :

.yellow-block {
    margin:20px;
    background:yellow;
    padding:20px;
    color:white;
    font:normal 16px Arial;
}

Saya akan merubah background menjadi hijau dengan JavaScript :

var elems = document.getElementsByClassName('yellow-block');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.background = 'green';
}


Versi jQuery (saya rubah menjadi merah maroon supaya terlihat berbeda)

$('.yellow-block').css('background', 'maroon');


Jangan banyak nanya JS dan JQuery yaaa.. lagi belajar :D

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

58 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Pertamax kah?
    1. premium :D
    2. ok, sepertinya menarik.... nice post, ane pelajari dl kang di blog eksperimen, Aisuka Blog :)

      hatur nuhun
  2. ceileh keduluan bebberapa detik
  3. Waduh, keduluan ama kiki, makasih kak, pas lagi butuh nih, buat background jumlah total notifikasi komentar blog aku ?
    1. keren notif containernya :-d
  4. kang...notifnya itu bsa kah di buat di dreamweaver??
    kalo bsa disini ada tutorialnya ga?
    numpang jga isi form,,,buat tugas kul..
    http://rookie.pusku.com/for/
    kalo g di ijinkan silahkan di hapus aja kang gpp
    makasi
    1. bisa aja sob... cuman JSnya yang rumit :) blom ada disini..
  5. Gk dapet pertamax'a :( , pelajari aja dah :D
    1. Kang membuat Emoticon pada comment seperti Kang Ismet gimana yah ?
  6. nyimak saj akang saya masih perlu belajar.
  7. Menarik nih Kang, tapi tidak ada tutorial cara
    Menggantinya Kang? saya pengen belajar kang
    1. maksudnya?
    2. buka demonya mas, disana kan sudah ada kode html, script, css. tingggal kita pilih tempat mana mau dipasang mas. :)
  8. Kang maaf OOT, buka forumnya berat :D
    Saya boleh minta bikinin tutorial form submision nggak kang?
    Saya tadinya pake ini -> http://goo.gl/o4em1G dan jadinya begini -> http://goo.gl/SzHGST
    kurang gimana gitu kalo ada kuotanya gitu -____-"
    Terus saya nemu tutorial ini diforum ads-id -> http://goo.gl/bbD8ul dan ini http://goo.gl/hJ0g3D
    tapi nggak lengkap :(

    Tolongin ya kang..pliiiis
    Kang Ismet ganteng deh walopun nggak seganteng saya :P
    1. emang berat sih forumnya bawaan google, saya juga kurang begitu suka :)
      mau yang mana nih? yang pake google docs atau php?
  9. weis, ilmu2 js dan jq uda mulai djlaskan :D
    kyknya fungsi js jga bsa mrubah link jga deh..?
    1. bisa apa aja ko, untuk mengganti link sya pernah share http://blog.kangismet.net/2013/06/mengganti-link-url-dengan-javascript.html
  10. silaturrahmi kang, sebelum berangkat kerja..... :)
    Topik baru nich.... menyimak dulu... :p
  11. Ngabelegbeg Kang jQuery sareng JavaScript mah.. Rieut nengali code na ge :p
    1. ngaleueut oskadon rieut mah kang :D
  12. Bisa juga dirubah dengan JS :D
  13. mohon ijin sedot kode sedikit dari kang ismet, :)
  14. prikitiw tehnikna ... !! saya can wawuh bener kang sareng jquery teh pokona mantap pisan
    1. sayah ge nuju kenalan kang :D
  15. hahaha kyaknya itu saya kang yang nanya,,, hehe ternyata dibuatin tutorialnya disini. Terima kasih banget kang
    cara mengganti otomatis clear: both; pada gambar posting menjadi clear: left;. ternyata menggunakan CSS jga bisa kang
    .separator {
    clear: left !important;
    }
    1. congrats deh sob :-d
  16. Kelebihan nya apa mas jika di ganti dengan script Jquery ??
    1. disarankan sih edit manual, pake jquery hanya memanipulasi
  17. wah saya ketinggalan artikel ini -_-
    makasih udah share kang :D
    - salam damai
  18. wah bagus artikelnya.
    makasih sudah share kang.

    -blogwalking-
  19. Request bang, cara buat notifikasi kayak blog abng yang di header.....
  20. Knapa komentar yang dblog kang ismet masuk jga ke blogq ya,,,
    ilkomunived.blogspot.com/
  21. uda fix kang.... lupa ganti almatnya,,,,,
  22. saya sudah gunakan template super seo agan thanks yach..
  23. Mas / Om / Pak Ismet yang baik, bagaimana caranya agar setiap kita memasukkan gambar ke google, kan ada 2 yaitu a href dan img source. bagaimana caranya otomatis menambah rel="lightbox" di bagian a href secara otomatis ?
    1. versi jQuery

      $('.separator a').attr('rel','lightbox');

      versi JavaScript

      document.querySelector( '.separator a' ).rel = 'lightbox';
  24. oh ya kk, domain blogger tut nya kan sudah expire, gak mau dibeli lagi ?
    1. ga tau.. itu yang ngurus sodara saya
  25. Infonya bagus ni kang :)
    coba dulu ah, :)
  26. Nyimak lagi Kang, di artikel ini sangat bermanfaat
    Buat pengethuan saya pastinya. terima kasih Kang Ismet :)
  27. kang , maaf OOT saya mau minta bantuan.. kalo pasang widget ini http://cssdeck.com/labs/yfbdkacf dan http://codepen.io/cesar-gomez/pen/HbwDF di blog gimana yah ? soalnya fail terus.. minta bantuannya kang master :)
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.