Merubah CSS dengan JavaScript / JQuery
Merubah CSS dengan JavaScript / JQuery - Beberapa hari kebelakang ada sahabat yang bertanya bagai mana cara mengganti otomatis 
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 :
Saya akan merubah background menjadi hijau dengan JavaScript :
Versi jQuery (saya rubah menjadi merah maroon supaya terlihat berbeda)
Jangan banyak nanya JS dan JQuery yaaa.. lagi belajar :D
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
58 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Buat pengethuan saya pastinya. terima kasih Kang Ismet :)
coba dulu ah, :)
$('.separator a').attr('rel','lightbox');
versi JavaScript
document.querySelector( '.separator a' ).rel = 'lightbox';
ilkomunived.blogspot.com/
makasih sudah share kang.
-blogwalking-
makasih udah share kang :D
- salam damai
cara mengganti otomatis clear: both; pada gambar posting menjadi clear: left;. ternyata menggunakan CSS jga bisa kang
.separator {
clear: left !important;
}
Topik baru nich.... menyimak dulu... :p
kyknya fungsi js jga bsa mrubah link jga deh..?
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
mau yang mana nih? yang pake google docs atau php?
Menggantinya Kang? saya pengen belajar kang
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
hatur nuhun