Blog Kang Ismet

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.

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