Toggle Add Remove Class Javascript

Toggle Add Remove Class Javascript

3 min read Jun 20, 2024
Toggle Add Remove Class Javascript

Cara Toggle Add Remove Class dengan JavaScript

Dalam pengembangan web, seringkali kita membutuhkan cara untuk menambahkan atau menghapus class CSS pada elemen HTML secara dinamis menggunakan JavaScript. Untuk mencapai hal ini, kita dapat memanfaatkan metode toggle().

Apa itu Toggle?

Toggle adalah sebuah fungsi yang memungkinkan kita untuk mengaktifkan atau menonaktifkan sebuah fitur atau elemen. Dalam konteks JavaScript, metode toggle() memungkinkan kita untuk menambahkan atau menghapus class pada elemen HTML secara bergantian.

Cara Menggunakan Toggle Add Remove Class

Berikut adalah cara untuk menggunakan metode toggle() untuk menambahkan dan menghapus class pada elemen HTML:

  1. Pilih elemen HTML: Gunakan document.querySelector() atau document.getElementById() untuk memilih elemen yang akan diberi class.

  2. Gunakan classList.toggle(): Panggil metode toggle() pada objek classList dari elemen yang dipilih. Sebagai argumen, masukkan nama class yang ingin Anda toggle.

Contoh:




  Toggle Add Remove Class
  


  
  

This is a paragraph.

Penjelasan:

  • Kode di atas memilih tombol dan paragraf dengan ID myButton dan myParagraph.
  • Saat tombol diklik, fungsi addEventListener() memanggil fungsi anonim yang akan menambahkan atau menghapus class "active" pada paragraf.
  • classList.toggle() akan menambahkan class "active" jika class tersebut belum ada, dan akan menghapusnya jika class tersebut sudah ada.

Keuntungan Menggunakan Toggle

  • Mudah digunakan: Kode yang singkat dan mudah dipahami.
  • Efisien: Mengurangi kebutuhan untuk memeriksa keberadaan class sebelum menambahkan atau menghapusnya.
  • Bersih: Memberikan struktur kode yang rapi dan terorganisir.

Kesimpulan

Metode classList.toggle() adalah cara yang mudah dan efisien untuk menambahkan atau menghapus class pada elemen HTML secara dinamis menggunakan JavaScript. Dengan menggunakan metode ini, Anda dapat membuat aplikasi web yang responsif dan interaktif.