Cara menggunakan .ADDCLASS pada JavaScript

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:

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:

Maka ketika saya menjalankan kode:

$["#box"].removeClass["tiga"];

Class tiga akan dihapus dari kode HTML, menjadi:

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

Belajar jQuery Duniailkom


   $[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"];
     }]
 
   }];
   
   
   #box {
     width: 300px;
     height: 80px;
   }
   .add_warna {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_bayang {
     box-shadow: 7px 7px silver;
   }
   





Hapus Warna
Hapus Border
Hapus Bayang

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:

Belajar jQuery Duniailkom


   $[document].ready[function[] {
 
     $["#warna"].click[function[] {
       $["#box"].toggleClass["add_warna"];
     }]
 
     $["#border"].click[function[] {
       $["#box"].toggleClass["add_border"];
     }]
 
     $["#bayang"].click[function[] {
       $["#box"].toggleClass["add_bayang"];
     }]
 
   }];
   
   
   #box {
     width: 300px;
     height: 80px;
   }
   .add_warna {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_bayang {
     box-shadow: 7px 7px silver;
   }
   





Warna
Border
Bayang

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.