Menambahkan Class dengan ClassList di JavaScript
classList adalah properti yang tersedia pada objek Element di JavaScript, memberikan akses mudah dan efisien untuk memanipulasi kelas CSS yang diterapkan pada elemen HTML.
Cara Menggunakan classList
Berikut beberapa metode yang tersedia pada classList untuk memanipulasi kelas:
1. add(): Menambahkan Kelas
Metode add() menambahkan kelas baru ke daftar kelas elemen. Jika kelas sudah ada, metode ini tidak akan melakukan apa-apa.
const myElement = document.getElementById('myElement');
// Menambahkan kelas 'active'
myElement.classList.add('active');
2. remove(): Menghapus Kelas
Metode remove() menghapus kelas yang ditentukan dari daftar kelas elemen.
const myElement = document.getElementById('myElement');
// Menghapus kelas 'hidden'
myElement.classList.remove('hidden');
3. toggle(): Mengalihkan Kelas
Metode toggle() menambahkan kelas jika kelas tersebut belum ada, dan menghapusnya jika kelas tersebut sudah ada.
const myElement = document.getElementById('myElement');
// Mengalihkan kelas 'show'
myElement.classList.toggle('show');
4. contains(): Memeriksa Keberadaan Kelas
Metode contains() mengembalikan nilai boolean (true atau false) yang menunjukkan apakah kelas yang ditentukan ada dalam daftar kelas elemen.
const myElement = document.getElementById('myElement');
// Memeriksa apakah kelas 'error' ada
if (myElement.classList.contains('error')) {
// Lakukan sesuatu jika kelas 'error' ada
}
5. replace(): Mengganti Kelas
Metode replace() mengganti kelas lama dengan kelas baru.
const myElement = document.getElementById('myElement');
// Mengganti kelas 'old-class' dengan kelas 'new-class'
myElement.classList.replace('old-class', 'new-class');
Contoh Penggunaan:
ClassList Example
Ini adalah elemen saya.
Kode ini menampilkan elemen dengan kelas hidden (tersembunyi) dan active (berwarna kuning) ketika tombol "Toggle Element" diklik.
classList memudahkan manipulasi kelas CSS dalam JavaScript, meningkatkan efisiensi dan membuat kode lebih mudah dibaca.