Add Class To Element Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

31

Share

Menambahkan Class ke Elemen dengan JavaScript

JavaScript memberikan fleksibilitas untuk memanipulasi elemen HTML, termasuk menambahkan class. Kemampuan ini sangat berguna untuk mengubah tampilan dan perilaku elemen secara dinamis. Berikut adalah beberapa metode untuk menambahkan class ke elemen dengan JavaScript:

1. Menggunakan classList.add()

Metode classList.add() adalah cara paling umum dan efisien untuk menambahkan class ke elemen.

Kode:

const element = document.getElementById("myElement");
element.classList.add("newClass"); 

Penjelasan:

1. Pertama, kita mengambil elemen yang ingin kita tambahkan class dengan document.getElementById().
2. Kemudian, kita menggunakan classList.add() untuk menambahkan class "newClass" ke elemen.

Keuntungan:

• Sederhana dan mudah digunakan.
• Mencegah duplikat class. Jika class yang sama sudah ada, classList.add() tidak akan menambahkannya lagi.

2. Menggunakan className

Metode className adalah cara tradisional untuk memanipulasi class.

Kode:

const element = document.getElementById("myElement");
element.className += " newClass"; 

Penjelasan:

1. Kita mengambil elemen dengan document.getElementById().
2. Kita menambahkan class baru ("newClass") ke className elemen dengan menggunakan operator +=.

Keuntungan:

• Cara yang lebih tradisional.

Kelemahan:

• Memungkinkan duplikat class.
• Perlu hati-hati dalam menambahkan class, karena bisa menyebabkan kesalahan jika tidak digunakan dengan benar.

3. Menambahkan class secara langsung

Anda dapat menambahkan class secara langsung ke atribut class elemen.

Kode:

const element = document.getElementById("myElement");
element.setAttribute("class", "newClass");

Penjelasan:

1. Kita mengambil elemen dengan document.getElementById().
2. Kita menggunakan setAttribute() untuk menambahkan atribut "class" dengan nilai "newClass" ke elemen.

Keuntungan:

• Fleksibel untuk menambahkan class.

Kelemahan:

• Menghapus semua class yang ada.
• Perlu hati-hati dalam mengganti nilai atribut class.

Kesimpulan

Metode classList.add() adalah metode yang direkomendasikan untuk menambahkan class ke elemen di JavaScript karena sederhana, efisien, dan mencegah duplikat class. Pilihlah metode yang paling sesuai dengan kebutuhan Anda dalam mengembangkan aplikasi web Anda.