Add Remove Class Javascript

Add Remove Class Javascript

3 min read Jun 20, 2024
Add Remove Class Javascript

Menambahkan dan Menghapus Class dengan JavaScript

JavaScript menyediakan cara mudah untuk menambahkan dan menghapus class dari elemen HTML. Kemampuan ini sangat berguna untuk membuat interaksi dinamis dalam halaman web, seperti mengubah tampilan elemen saat tombol diklik, memvalidasi input, atau mengontrol animasi.

Menambahkan Class

Untuk menambahkan class ke elemen HTML, gunakan metode classList.add():

const element = document.getElementById('myElement');
element.classList.add('newClass');

Kode di atas akan menambahkan class "newClass" ke elemen dengan id "myElement". Jika elemen tersebut sudah memiliki class "newClass", maka metode classList.add() tidak akan mengubah apa-apa.

Menghapus Class

Untuk menghapus class dari elemen HTML, gunakan metode classList.remove():

const element = document.getElementById('myElement');
element.classList.remove('newClass');

Kode di atas akan menghapus class "newClass" dari elemen dengan id "myElement". Jika elemen tersebut tidak memiliki class "newClass", maka metode classList.remove() tidak akan mengubah apa-apa.

Toggle Class

Untuk menambahkan class jika class tersebut tidak ada, dan menghapus class jika class tersebut ada, gunakan metode classList.toggle():

const element = document.getElementById('myElement');
element.classList.toggle('newClass');

Kode di atas akan menambahkan class "newClass" ke elemen dengan id "myElement" jika class tersebut tidak ada, dan menghapus class "newClass" jika class tersebut sudah ada.

Contoh Penggunaan

Berikut adalah contoh penggunaan metode classList.add(), classList.remove(), dan classList.toggle() untuk membuat tombol yang mengubah tampilan elemen saat diklik:




  
  
  Add Remove Class
  


  
  

This is a paragraph.

Pada contoh ini, saat tombol diklik, class "active" akan di-toggle pada paragraf. Hal ini akan mengubah warna latar belakang paragraf menjadi biru muda.

Kesimpulan

Metode classList.add(), classList.remove(), dan classList.toggle() adalah cara yang mudah dan efektif untuk menambahkan, menghapus, dan mengontrol class pada elemen HTML menggunakan JavaScript. Kemampuan ini sangat berguna untuk membuat halaman web yang interaktif dan dinamis.