Click Add Class And Remove Class Javascript

Click Add Class And Remove Class Javascript

3 min read Jun 20, 2024
Click Add Class And Remove Class Javascript

Tambahkan dan Hapus Class dengan JavaScript

JavaScript memungkinkan kita untuk memanipulasi elemen HTML dengan mudah, termasuk menambahkan dan menghapus kelas CSS. Ini sangat berguna untuk mengubah tampilan dan perilaku elemen secara dinamis berdasarkan interaksi pengguna atau kondisi tertentu.

Menambahkan Class

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

const element = document.getElementById('myElement');

// Menambahkan kelas 'active' ke elemen
element.classList.add('active');

Menghapus Class

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

const element = document.getElementById('myElement');

// Menghapus kelas 'active' dari elemen
element.classList.remove('active');

Mengganti Class

Anda dapat mengganti kelas yang ada dengan kelas baru dengan menggunakan metode classList.replace():

const element = document.getElementById('myElement');

// Mengganti kelas 'active' dengan kelas 'inactive'
element.classList.replace('active', 'inactive');

Menentukan Keberadaan Class

Anda dapat memeriksa apakah kelas tertentu ada pada elemen HTML dengan menggunakan metode classList.contains():

const element = document.getElementById('myElement');

// Memeriksa apakah kelas 'active' ada pada elemen
if (element.classList.contains('active')) {
  // Lakukan sesuatu jika kelas 'active' ada
}

Toggle Class

Metode classList.toggle() memungkinkan Anda untuk menambahkan kelas jika kelas itu tidak ada, atau menghapusnya jika kelas itu sudah ada:

const element = document.getElementById('myElement');

// Toggle kelas 'active' pada elemen
element.classList.toggle('active');

Contoh Penggunaan








Ini adalah paragraf.

Kode di atas membuat paragraf dengan id "myParagraph". Tombol "Toggle Class" memanggil fungsi toggleClass() yang meng-toggle kelas "active" pada paragraf, mengubah warna latar belakangnya.

Dengan menggunakan metode classList di JavaScript, Anda dapat dengan mudah memanipulasi kelas CSS pada elemen HTML untuk menciptakan pengalaman pengguna yang dinamis dan interaktif.