Set Classlist Javascript

Set Classlist Javascript

4 min read Jun 20, 2024
Set Classlist Javascript

Set ClassList JavaScript

classList adalah properti yang tersedia di setiap elemen HTML dalam JavaScript. Properti ini memberikan akses mudah untuk memanipulasi kelas CSS yang diterapkan pada elemen tersebut.

Memahami ClassList

classList adalah objek yang berisi daftar kelas CSS yang terkait dengan elemen HTML. Objek ini menyediakan beberapa metode yang memungkinkan Anda untuk menambahkan, menghapus, mengganti, dan memeriksa kelas yang diterapkan pada elemen.

Metode ClassList

Berikut adalah beberapa metode utama yang digunakan untuk memanipulasi classList:

1. add(className)

  • Metode ini menambahkan kelas baru ke daftar kelas yang sudah ada pada elemen.
  • Jika kelas yang ditambahkan sudah ada, metode ini tidak akan mengubah apapun.

Contoh:

const element = document.getElementById("myElement");
element.classList.add("active"); // Menambahkan kelas "active"

2. remove(className)

  • Metode ini menghapus kelas tertentu dari daftar kelas pada elemen.
  • Jika kelas yang dihapus tidak ada, metode ini tidak akan mengubah apapun.

Contoh:

const element = document.getElementById("myElement");
element.classList.remove("active"); // Menghapus kelas "active"

3. toggle(className)

  • Metode ini menambahkan kelas jika kelas tersebut belum ada, dan menghapus kelas jika kelas tersebut sudah ada.
  • Ini adalah cara yang mudah untuk mengganti status "aktif" dan "non-aktif" pada elemen.

Contoh:

const element = document.getElementById("myElement");
element.classList.toggle("active"); // Menambahkan atau menghapus kelas "active"

4. contains(className)

  • Metode ini mengembalikan nilai boolean (benar atau salah) yang menunjukkan apakah kelas tertentu ada dalam daftar kelas pada elemen.

Contoh:

const element = document.getElementById("myElement");
if (element.classList.contains("active")) {
  // Lakukan sesuatu jika kelas "active" ada
}

5. replace(oldClassName, newClassName)

  • Metode ini mengganti kelas lama dengan kelas baru.
  • Jika kelas lama tidak ada, metode ini tidak akan mengubah apapun.

Contoh:

const element = document.getElementById("myElement");
element.classList.replace("active", "inactive"); // Mengganti kelas "active" dengan "inactive"

Menggunakan ClassList untuk Mengatur Styling

classList sangat berguna untuk mengatur styling elemen HTML secara dinamis. Anda dapat menambahkan atau menghapus kelas berdasarkan interaksi pengguna, data yang diterima, atau kondisi lainnya.

Contoh:

const button = document.getElementById("myButton");

button.addEventListener("click", () => {
  button.classList.toggle("active"); // Toggle kelas "active" saat tombol diklik
});

Keuntungan Menggunakan ClassList

  • Mudah Digunakan: classList menyediakan API yang mudah digunakan untuk memanipulasi kelas CSS.
  • Fleksibel: Anda dapat menggunakan classList untuk mengatur styling secara dinamis berdasarkan berbagai kondisi.
  • Standar: classList adalah fitur standar JavaScript yang didukung oleh semua browser modern.

Kesimpulan

classList adalah alat yang kuat dan mudah digunakan untuk memanipulasi kelas CSS dalam JavaScript. Dengan memanfaatkan classList, Anda dapat membuat situs web yang lebih interaktif dan dinamis.

Related Post