Add Class To Element Javascript By Classname

MUAZHAN

3 min read

·

Jun 22, 2024

44

Share

Menambahkan Class ke Elemen dengan JavaScript

JavaScript memberikan fleksibilitas untuk memanipulasi elemen HTML, termasuk menambahkan class. Berikut adalah beberapa metode umum untuk menambahkan class ke elemen HTML berdasarkan nama class:

1. Menggunakan classList.add()

Metode ini adalah cara yang paling umum dan mudah untuk menambahkan class ke elemen HTML.

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

Kode di atas akan menambahkan class newClass ke elemen dengan id myElement.

2. Menggunakan className

Metode ini memungkinkan Anda untuk memanipulasi seluruh atribut class dari elemen.

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

Kode di atas akan mengganti class yang ada (existingClass) dengan existingClass newClass.

3. Menggunakan setAttribute()

Metode ini memberikan cara yang lebih fleksibel untuk memanipulasi atribut elemen, termasuk class.

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

Kode di atas akan menambahkan class newClass ke atribut class elemen, tanpa mengubah class yang sudah ada (existingClass).

Pertimbangan

• classList.add() adalah metode yang direkomendasikan untuk menambahkan class karena menjaga atribut class yang sudah ada.
• className harus digunakan dengan hati-hati karena mengganti semua class yang ada dengan string baru.
• setAttribute() menawarkan fleksibilitas yang lebih besar tetapi mungkin tidak seefisien classList.add().

Contoh: Mengubah Style Elemen

Anda dapat menggunakan class yang baru ditambahkan untuk mengubah style elemen HTML dengan CSS.

HTML:

Ini adalah elemen dengan id "myElement"

CSS:

.newClass {
  background-color: yellow;
  color: blue;
}

JavaScript:

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

Kode di atas akan mengubah background elemen menjadi kuning dan warna teks menjadi biru setelah class newClass ditambahkan.

Dengan memahami bagaimana menambahkan class ke elemen HTML dengan JavaScript, Anda dapat memanipulasi tampilan dan perilaku website secara dinamis dan responsif.