Add Css Class Via Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

28

Share

Menambahkan Class CSS Melalui JavaScript

JavaScript memberikan kemampuan untuk memanipulasi elemen HTML secara dinamis, termasuk menambahkan class CSS. Kemampuan ini sangat berguna untuk mengubah tampilan dan perilaku elemen secara real-time berdasarkan interaksi pengguna atau kondisi tertentu.

Cara Menambahkan Class CSS Melalui JavaScript

Ada beberapa cara untuk menambahkan class CSS melalui JavaScript:

1. classList.add(): Metode ini merupakan cara yang paling umum dan efisien untuk menambahkan class ke elemen HTML.

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

   Kode ini akan menambahkan class newClass ke elemen dengan id myElement.

2. className: Property ini memungkinkan kita untuk mengakses dan memanipulasi string class yang ada pada elemen HTML.

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

   Kode ini akan menambahkan newClass ke string class yang sudah ada pada elemen myElement. Jika elemen sudah memiliki class, maka class baru akan dipisahkan dengan spasi.

3. setAttribute(): Metode ini memungkinkan kita untuk menambahkan atribut ke elemen HTML, termasuk atribut class.

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

   Kode ini akan mengganti semua class yang sudah ada pada elemen myElement dengan newClass.

Contoh Penggunaan

Berikut contoh bagaimana menambahkan class CSS ke elemen HTML menggunakan classList.add():

  
  


  Click Me

  

Dalam contoh ini, ketika tombol diklik, class active akan ditambahkan ke elemen button. Hal ini akan menyebabkan background button menjadi kuning.

Kesimpulan

Menambahkan class CSS melalui JavaScript memberikan fleksibilitas dalam mengatur tampilan dan perilaku elemen HTML secara dinamis. Pilihlah metode yang paling sesuai dengan kebutuhan Anda dan pastikan untuk menulis kode yang efisien dan mudah dipelihara.