Add Css Class Programmatically Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

41

Share

Menambahkan Class CSS Secara Programatis dengan JavaScript

JavaScript menyediakan beberapa cara untuk menambahkan class CSS secara programatis ke elemen HTML. Ini sangat berguna untuk mengubah tampilan dan gaya elemen berdasarkan interaksi pengguna, data yang diterima, atau kondisi lainnya. Berikut adalah beberapa metode yang umum digunakan:

1. Menggunakan classList.add():

Metode classList.add() adalah cara paling sederhana dan direkomendasikan untuk menambahkan class ke elemen HTML.

const myElement = document.getElementById('myElement');
myElement.classList.add('new-class');

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

2. Menggunakan Atribut className:

Anda juga dapat menambahkan class menggunakan atribut className dari elemen.

const myElement = document.getElementById('myElement');
myElement.className += ' new-class';

Metode ini akan menambahkan new-class ke daftar class yang sudah ada pada elemen. Pastikan untuk menambahkan spasi sebelum class baru untuk memisahkannya dari class yang ada.

3. Menggunakan setAttribute():

Metode setAttribute() dapat digunakan untuk mengatur atribut className dari elemen.

const myElement = document.getElementById('myElement');
myElement.setAttribute('class', 'new-class');

Metode ini akan mengganti semua class yang ada pada elemen dengan new-class.

4. Menambahkan Class dengan Kondisi:

Anda dapat menggunakan kondisi untuk menambahkan class hanya jika kondisi tertentu terpenuhi.

const myElement = document.getElementById('myElement');
if (condition) {
  myElement.classList.add('active');
} else {
  myElement.classList.remove('active');
}

Kode di atas akan menambahkan class active ke elemen jika kondisi terpenuhi, dan menghapusnya jika tidak.

5. Menambahkan Class dengan Event Listener:

Anda dapat menambahkan class ke elemen berdasarkan event yang terjadi.

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', () => {
  const myElement = document.getElementById('myElement');
  myElement.classList.add('clicked');
});

Kode ini akan menambahkan class clicked ke elemen myElement ketika tombol myButton diklik.

Perhatian:

• Selalu pastikan bahwa class yang Anda tambahkan sudah didefinisikan dalam stylesheet Anda.
• Gunakan metode yang paling sesuai dengan kebutuhan dan skenario Anda.
• Hindari menggunakan className secara langsung jika Anda ingin menambahkan atau menghapus beberapa class.

Dengan memahami cara menambahkan class secara programatis, Anda dapat membuat situs web yang lebih dinamis dan interaktif.