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
Pertamax kah?
premium :D
ok, sepertinya menarik.... nice post, ane pelajari dl kang di blog eksperimen, Aisuka Blog :)
hatur nuhun
ceileh keduluan bebberapa detik
Waduh, keduluan ama kiki, makasih kak, pas lagi butuh nih, buat background jumlah total notifikasi komentar blog aku ?
keren notif containernya :-d
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
bisa aja sob... cuman JSnya yang rumit :) blom ada disini..
Gk dapet pertamax'a :( , pelajari aja dah :D
Kang membuat Emoticon pada comment seperti Kang Ismet gimana yah ?
nyimak saj akang saya masih perlu belajar.
Menarik nih Kang, tapi tidak ada tutorial cara
Menggantinya Kang? saya pengen belajar kang
maksudnya?
buka demonya mas, disana kan sudah ada kode html, script, css. tingggal kita pilih tempat mana mau dipasang mas. :)
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
emang berat sih forumnya bawaan google, saya juga kurang begitu suka :)
mau yang mana nih? yang pake google docs atau php?
weis, ilmu2 js dan jq uda mulai djlaskan :D
kyknya fungsi js jga bsa mrubah link jga deh..?
bisa apa aja ko, untuk mengganti link sya pernah share http://blog.kangismet.net/2013/06/mengganti-link-url-dengan-javascript.html
silaturrahmi kang, sebelum berangkat kerja..... :)
Topik baru nich.... menyimak dulu... :p
Ngabelegbeg Kang jQuery sareng JavaScript mah.. Rieut nengali code na ge :p
ngaleueut oskadon rieut mah kang :D
mohon ijin sedot kode sedikit dari kang ismet, :)
prikitiw tehnikna ... !! saya can wawuh bener kang sareng jquery teh pokona mantap pisan
sayah ge nuju kenalan kang :D
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;
}
congrats deh sob :-d
Kelebihan nya apa mas jika di ganti dengan script Jquery ??
disarankan sih edit manual, pake jquery hanya memanipulasi
wah saya ketinggalan artikel ini -_-
makasih udah share kang :D
- salam damai
wah bagus artikelnya.
makasih sudah share kang.
-blogwalking-
Request bang, cara buat notifikasi kayak blog abng yang di header.....
Knapa komentar yang dblog kang ismet masuk jga ke blogq ya,,,
ilkomunived.blogspot.com/
uda fix kang.... lupa ganti almatnya,,,,,
saya sudah gunakan template super seo agan thanks yach..
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 ?
versi jQuery
$('.separator a').attr('rel','lightbox');
versi JavaScript
document.querySelector( '.separator a' ).rel = 'lightbox';
oh ya kk, domain blogger tut nya kan sudah expire, gak mau dibeli lagi ?
ga tau.. itu yang ngurus sodara saya
Infonya bagus ni kang :)
coba dulu ah, :)
Nyimak lagi Kang, di artikel ini sangat bermanfaat
Buat pengethuan saya pastinya. terima kasih Kang Ismet :)
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 :)