Merubah CSS dengan JavaScript / 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
Berita Lebih Baru Berita Lebih Lama
  • Anonim
    Profil:
    08 November, 2013

    Pertamax kah?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 November, 2013

      premium :D

    • Anonim
      Profil:
      08 November, 2013

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

      hatur nuhun

  • Anonim
    Profil:
    08 November, 2013

    ceileh keduluan bebberapa detik

  • IRIL SAGITA
    Profil: https://www.blogger.com/profile/06492717423102958633
    08 November, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 November, 2013

      keren notif containernya :-d

  • Afif Nuzia A
    Profil: https://www.blogger.com/profile/06361075695583486604
    08 November, 2013

    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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 November, 2013

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

  • Shiro
    Profil: https://www.blogger.com/profile/05961364136323351496
    08 November, 2013

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

    • Shiro
      Profil:https://www.blogger.com/profile/05961364136323351496
      08 November, 2013

      Kang membuat Emoticon pada comment seperti Kang Ismet gimana yah ?

  • zigzoor
    Profil: https://www.blogger.com/profile/10438425858295508916
    08 November, 2013

    nyimak saj akang saya masih perlu belajar.

  • Unknown
    Profil: https://www.blogger.com/profile/03028304356873120390
    09 November, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      09 November, 2013

      maksudnya?

    • Admin
      Profil:https://www.blogger.com/profile/13586899371667182261
      09 November, 2013

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

  • Deden
    Profil: https://www.blogger.com/profile/02290044945027209696
    09 November, 2013

    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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      09 November, 2013

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

  • Unknown
    Profil: https://www.blogger.com/profile/08635182777368885475
    09 November, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      09 November, 2013

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

  • Bos Wedus
    Profil: https://www.blogger.com/profile/11647700654434797830
    09 November, 2013

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

  • Gupitan
    Profil: https://www.blogger.com/profile/01958676779323309263
    09 November, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      09 November, 2013

      ngaleueut oskadon rieut mah kang :D

  • Bungfrangki
    Profil: https://www.blogger.com/profile/13162875744493565460
    09 November, 2013

    mohon ijin sedot kode sedikit dari kang ismet, :)

  • Sopala Multapa
    Profil: https://www.blogger.com/profile/17709242066690693656
    09 November, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      09 November, 2013

      sayah ge nuju kenalan kang :D

  • Bagus Prehantoro
    Profil: https://www.blogger.com/profile/18312072001769262055
    09 November, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      09 November, 2013

      congrats deh sob :-d

  • Rico
    Profil: https://www.blogger.com/profile/02600197375846313975
    09 November, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      09 November, 2013

      disarankan sih edit manual, pake jquery hanya memanipulasi

  • no data
    Profil: https://www.blogger.com/profile/13465796310160423114
    10 November, 2013

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

  • Helmi Fatur Rohman
    Profil: https://www.blogger.com/profile/15006735404330378338
    12 November, 2013

    wah bagus artikelnya.
    makasih sudah share kang.

    -blogwalking-

  • Rdk
    Profil: https://www.blogger.com/profile/15708134060287413861
    13 November, 2013

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

  • Rdk
    Profil: https://www.blogger.com/profile/15708134060287413861
    13 November, 2013

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

  • Rdk
    Profil: https://www.blogger.com/profile/15708134060287413861
    13 November, 2013

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

  • Unknown
    Profil: https://www.blogger.com/profile/08518152809388672936
    16 November, 2013

    saya sudah gunakan template super seo agan thanks yach..

  • Unknown
    Profil: https://www.blogger.com/profile/00305225147558275291
    16 November, 2013

    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 ?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      16 November, 2013

      versi jQuery

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

      versi JavaScript

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

  • Unknown
    Profil: https://www.blogger.com/profile/00305225147558275291
    17 November, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      17 November, 2013

      ga tau.. itu yang ngurus sodara saya

  • Gojek Ewako
    Profil: https://www.blogger.com/profile/09831389500263491584
    20 November, 2013

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

  • Unknown
    Profil: https://www.blogger.com/profile/03028304356873120390
    27 November, 2013

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

  • Unknown
    Profil: https://www.blogger.com/profile/01742051435350337076
    15 Desember, 2013

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

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
57 Komentar