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

58 komentar

ceileh keduluan bebberapa detik

Balas

Waduh, keduluan ama kiki, makasih kak, pas lagi butuh nih, buat background jumlah total notifikasi komentar blog aku ?

Balas

keren notif containernya :-d

Balas

ok, sepertinya menarik.... nice post, ane pelajari dl kang di blog eksperimen, Aisuka Blog :)

hatur nuhun

Balas

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

Balas

Gk dapet pertamax'a :( , pelajari aja dah :D

Balas

bisa aja sob... cuman JSnya yang rumit :) blom ada disini..

Balas

huufft... :(
padahal pgn buat yg kyk gtuan buat ngumpulin tugas web..

Balas

iya kang premium :)
dibungkus aj hilap teu nyandak kompan :D

Balas

Kang membuat Emoticon pada comment seperti Kang Ismet gimana yah ?

Balas

kayaknya udah banyak yang share :D

Balas

kang bisa bantu saya gak :)

Balas

bantu apa ya? asal jangan suruh ngangkat beras sekarung aja :D

Balas

hehehe :)) , umh minta saran cari membuat yang seperti lonceng di ats blog kang ismet bagaimana ya "terima kasih"

Balas

nyimak saj akang saya masih perlu belajar.

Balas

untuk pertanyaan emotion tadi apakah bang ismet bisa kasih saran diambil di blog mana si . . . kal kang ismet punya bagi dong infonya :)

Balas

Menarik nih Kang, tapi tidak ada tutorial cara
Menggantinya Kang? saya pengen belajar kang

Balas

Kang artikel ini maksudanya mengganti warna kode, yanga ada pada artikel apa giman Kang? terima kasih

Balas

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

Balas

weis, ilmu2 js dan jq uda mulai djlaskan :D
kyknya fungsi js jga bsa mrubah link jga deh..?

Balas

silaturrahmi kang, sebelum berangkat kerja..... :)
Topik baru nich.... menyimak dulu... :p

Balas

Ngabelegbeg Kang jQuery sareng JavaScript mah.. Rieut nengali code na ge :p

Balas

Bisa juga dirubah dengan JS :D

Balas

dimana aja bisa sob.. asal seuaikan class atau id nya

Balas

ini bawaan komentar.. coba ganti pake thread comment hack v.3 udah otomatis ada emotnya

Balas

emang berat sih forumnya bawaan google, saya juga kurang begitu suka :)
mau yang mana nih? yang pake google docs atau php?

Balas

bisa apa aja ko, untuk mengganti link sya pernah share http://blog.kangismet.net/2013/06/mengganti-link-url-dengan-javascript.html

Balas

ngaleueut oskadon rieut mah kang :D

Balas

mohon ijin sedot kode sedikit dari kang ismet, :)

Balas

buka demonya mas, disana kan sudah ada kode html, script, css. tingggal kita pilih tempat mana mau dipasang mas. :)

Balas

prikitiw tehnikna ... !! saya can wawuh bener kang sareng jquery teh pokona mantap pisan

Balas

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;
}

Balas

Kelebihan nya apa mas jika di ganti dengan script Jquery ??

Balas

disarankan sih edit manual, pake jquery hanya memanipulasi

Balas

sayah ge nuju kenalan kang :D

Balas

yang menurut kang Ismet bagus aja deh, kang...dua-duanya juga boleh ehehehe :D
tak tungguin ya kang tutorialnya. Makasih kang :D

Balas

wah saya ketinggalan artikel ini -_-
makasih udah share kang :D
- salam damai

Balas

Fajri Andaviar itu kang mau jambret, awas nanti bikin rusuh di sini, ribet amat cari emoticon, eh kalo klik pencarian di blog ini lah tulis aja v3 nanti munculkok tread commentnya, itu sudah Valid pula @@,
- maafkan teman saya kang wkwkwkwkwk =>Fajri Andaviar

Balas

saya juga minta bungkus kang ^_^
terimakasih udah share!
- salam damai

Balas

izin nyimak kang ^_^
- salam damai :-d

Balas

wah bagus artikelnya.
makasih sudah share kang.

-blogwalking-

Balas

Request bang, cara buat notifikasi kayak blog abng yang di header.....

Balas

Knapa komentar yang dblog kang ismet masuk jga ke blogq ya,,,
ilkomunived.blogspot.com/

Balas

uda fix kang.... lupa ganti almatnya,,,,,

Balas

saya sudah gunakan template super seo agan thanks yach..

Balas

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 ?

Balas

versi jQuery

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

versi JavaScript

document.querySelector( '.separator a' ).rel = 'lightbox';

Balas

nanti kalau mau memasukkan link biasa kena efek gak dari javascript tersebut ?

Balas

oh ya kk, domain blogger tut nya kan sudah expire, gak mau dibeli lagi ?

Balas

kan sudah pake class khusus, jadi ga ngefek..

Balas

ga tau.. itu yang ngurus sodara saya

Balas

Infonya bagus ni kang :)
coba dulu ah, :)

Balas

Nyimak lagi Kang, di artikel ini sangat bermanfaat
Buat pengethuan saya pastinya. terima kasih Kang Ismet :)

Balas

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 :)

Balas

Poskan Komentar


×
Chat