Tutorial Belajar jQuery Part 14: Cara Mengubah Class CSS elemen HTML dengan jQuery

Dalam tutorial belajar jQuery sebelumnya kita telah membahas cara mengambil dan mengubah property CSS secara dinamis. Materi kali ini juga masih berkaitan dengan CSS, yakni cara mengubah class CSS elemen HTML dengan jQuery. Kita akan mempelajari 3 method jQuery, yakni addClass(), removeClass(), dan toggleClass().

Untuk dapat mengikuti tutorial ini sebaiknya anda juga sudah paham tentang apa itu CSS class dan cara penggunaannya. Jika belum bisa baca kembali di: Mengenal Jenis-jenis Selector Dasar CSS.

Cara Menambah Class CSS dengan jQuery

jQuery menyediakan method addClass() untuk menambahkan sebuah class CSS baru ke dalam element HTML saat ini. Sebagai contoh, misalkan saya memiliki sebuah tag HTML berikut:

<div id="box" class="satu"></div>

Jika saya menjalankan kode:

$("#box").addClass("dua");

Hasilnya akan menjadi:

<div id="box" class="satu dua"></div>

Perhatikan di dalam atribut class, sudah bertambah 1 class CSS lagi. Agar terlihat perubahan, tentunya kita sudah mempersiapkan kode CSS untuk class satu dan class dua.

Berikut contoh praktek penggunaan method addClass jQuery:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tambah_warna").click(function() {
       $("#box").addClass("add_warna");
     })
 
     $("#tambah_border").click(function() {
       $("#box").addClass("add_border");
     })
 
     $("#tambah_bayang").click(function() {
       $("#box").addClass("add_bayang");
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
   }
   .add_warna {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_bayang {
     box-shadow: 7px 7px silver;
   }
   </style>
</head>
<body>
  <div id="box"></div>
  <br>
  <button id="tambah_warna">Tambah Warna</button>
  <button id="tambah_border">Tambah Border</button>
  <button id="tambah_bayang">Tambah Bayang</button>
</body>
</html>

See the Pen Cara Menambah Class CSS dengan method addClass() jQuery by duniailkom (@duniailkom) on CodePen.10206

Jika anda menjalankan kode diatas, akan tampil 3 buah tombol: Tambah Warna, Tambah Border dan Tambah Bayang. Diatas ketiga tombol ini sebenarnya terdapat sebuah tag <div> dengan lebar 300px dan tinggi 80px. Karena tidak diwarnai, box ini tidak tampak.

Di dalam kode CSS, saya mempersiapkan 3 buah class selector, yakni .add_warna, .add_border dan .add_bayang. Ketiga selector ini memiliki property yang berbeda-beda.

Ketika tombol Tambah Warna di-klik, kode jQuery berikut akan dijalankan:

$("#box").addClass("add_warna");

Artinya, tambahkan sebuah class CSS dengan nama “add_warna” ke dalam tag HTML yang memiliki id=”#box”. Sehingga tag <div id=”#box”> akan berubah jadi:

<div class="add_warna" id="box"></div>

Karena di dalam selector .add_warna saya telah menulis property background-color: pink, box langsung berwarna pink. Efek penambahan ini akan mudah dilihat jika anda mengaktifkan fitur Web Developer Tools dari web browser, seperti tampilan berikut:

Menambah

Tombol kedua, Tambah Border akan menjalankan kode jQuery:

$("#box").addClass("add_border");

Hasilnya, kotak box akan memiliki bingkai hitam. Sesuai dengan isi property CSS di dalam class sector .add_border.

Terakhir, tombol Tambah Bayang akan menambahkan class .add_bayang, sehingga box akan memiliki efek bayangan dari property box-shadow CSS3: box-shadow: 7px 7px silver.


Cara Menghapus Class CSS dengan jQuery

Jika jQuery menyediakan method addClass() untuk menambahkan class CSS, maka juga tersedia method removeClass() yang bisa digunakan untuk menghapus class CSS.

Sebagai contoh, jika di dalam kode HTML saya memiliki tag berikut:

<div id="box" class="satu dua tiga"></div>

Maka ketika saya menjalankan kode:

$("#box").removeClass("tiga");

Class tiga akan dihapus dari kode HTML, menjadi:

<div id="box" class="satu dua"></div>

Berikut praktek dari penggunaan method removeClass untuk menghapus class CSS dengan jQuery:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#hapus_warna").click(function() {
       $("#box").removeClass("add_warna");
     })
 
     $("#hapus_border").click(function() {
       $("#box").removeClass("add_border");
     })
 
     $("#hapus_bayang").click(function() {
       $("#box").removeClass("add_bayang");
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
   }
   .add_warna {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_bayang {
     box-shadow: 7px 7px silver;
   }
   </style>
</head>
<body>
<div id="box" class="add_warna add_border add_bayang"></div>
<br>
<button id="hapus_warna">Hapus Warna</button>
<button id="hapus_border">Hapus Border</button>
<button id="hapus_bayang">Hapus Bayang</button>
</body>
</html>

See the Pen Cara Menghapus Class CSS dengan method removeClass() jQuery by duniailkom (@duniailkom) on CodePen.10206

Kode diatas adalah kebalikan dari contoh kode program sebelumnya. Disini saya menampilkan box lengkap dengan warna, border dan efek bayangan.

Ketika tombol Hapus Warna diklik, perintah berikut akan dijalankan:

$("#box").removeClass("add_warna");

Hasilnya warna box akan hilang. Ini karena property background-color: pink berada di dalam class add_warna. Jika class ini dihapus, warna box juga akan ikut terhapus. Begitu juga dengan tombol Hapus Border dan Hapus Bayang.


Mengenal Cara Penggunaan Method toggleClass jQuery

Selain method addClass() dan removeClass(), jQuery masih menyediakan 1 lagi method terkait class CSS, yakni toogleClass().

Method toggleClass() akan bergantian menambah dan menghapus class CSS. Jika saat ini class tidak ada, maka akan ditambahkan. Jika sudah ada, akan dihapus. Efeknya mirip dengan saklar: on atau off secara bergantian.

Langsung saja kita lihat contoh prakteknya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#warna").click(function() {
       $("#box").toggleClass("add_warna");
     })
 
     $("#border").click(function() {
       $("#box").toggleClass("add_border");
     })
 
     $("#bayang").click(function() {
       $("#box").toggleClass("add_bayang");
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
   }
   .add_warna {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_bayang {
     box-shadow: 7px 7px silver;
   }
   </style>
</head>
<body>
<div id="box" class="add_warna add_border add_bayang"></div>
<br>
<button id="warna">Warna</button>
<button id="border">Border</button>
<button id="bayang">Bayang</button>
</body>
</html>

See the Pen Cara Memodifikasi Class CSS dengan method toggleClass() jQuery by duniailkom (@duniailkom) on CodePen.10206

Silahkan anda klik beberapa kali tombol Warna, Warna pink akan bergantian muncul. Ini karena perintah:

$("#box").toggleClass("add_warna");

Akan bergantian menambah dan mengapus class add_warna. Hal yang sama juga berlaku untuk tombol Border dan Bayang. Silahkan anda mencoba kode program yang ada. Atau lebih bagus lagi jika memodifikasi kode program yang saya buat, misalnya menambahkan efek CSS lain.

Dalam tutorial belajar jQuery Duniailkom berikutnya, saya akan membahas tentang cara mengubah lebar dan tinggi element HTML menggunakan jQuery.


Tutorial Terkait:

4 Comments

  1. lisa
    19 Sep 16
    • Andre
      20 Sep 16
  2. hamin
    27 Jan 17
    • Andre
      28 Jan 17

Add Comment