Cara Toggle Kelas CSS pada Elemen di JavaScript

Toggle sangat berguna untuk tombol yang berganti status, seperti mode gelap, menu hamburger, atau akordeon. Satu metode menangani dua aksi sekaligus. Artikel ini membahas cara toggle kelas CSS di JavaScript.

Metode classList.toggle()

<script>
const tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
    document.body.classList.toggle("gelap");
});
</script>

Bila kelas sudah ada, toggle() menghapusnya; bila belum, menambahkannya.

Contoh Kasus: Mode Gelap (Dark Mode)

<script>
document.getElementById("switch").addEventListener("click", function() {
    const gelap = document.body.classList.toggle("dark");
    localStorage.setItem("tema", gelap ? "dark" : "terang"); // simpan pilihan
});
</script>

toggle() mengembalikan true/false, memudahkan menyimpan status ke localStorage.

Toggle Bersyarat

<script>
el.classList.toggle("aktif", kondisi); // tambah jika kondisi true, hapus jika false
</script>

Kesimpulan

Gunakan classList.toggle() untuk membuat fitur on/off seperti mode gelap atau menu. Nilai kembaliannya (true/false) memudahkan menyimpan status pengguna ke localStorage.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *