Add Same Class To Multiple Elements Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

46

Share

Menambahkan Class yang Sama ke Beberapa Elemen di JavaScript

Dalam pengembangan web, sering kali kita perlu menambahkan class yang sama ke beberapa elemen HTML. Misalnya, kita mungkin ingin menerapkan gaya yang sama pada beberapa tombol atau mengubah tampilan beberapa paragraf secara bersamaan.

JavaScript menyediakan cara yang mudah untuk menambahkan class yang sama ke beberapa elemen dengan menggunakan metode classList.add(). Berikut langkah-langkahnya:

1. Seleksi Elemen

Pertama, kita perlu memilih elemen-elemen yang ingin diberi class baru. Kita bisa melakukan ini dengan berbagai cara:

• Selektor CSS: Gunakan metode querySelectorAll() untuk memilih elemen yang cocok dengan selektor CSS tertentu. Misalnya:

const elements = document.querySelectorAll('.my-class');

• ID: Gunakan metode getElementById() untuk memilih elemen berdasarkan ID-nya. Misalnya:

const element = document.getElementById('my-element');

• TagName: Gunakan metode getElementsByTagName() untuk memilih elemen berdasarkan tag name-nya. Misalnya:

const elements = document.getElementsByTagName('p');

2. Tambahkan Class

Setelah kita memilih elemen yang ingin diubah, kita dapat menambahkan class baru dengan menggunakan metode classList.add(). Metode ini menerima nama class sebagai argumen.

Contoh:

// Menambahkan class 'active' ke semua elemen dengan class 'my-class'
const elements = document.querySelectorAll('.my-class');

for (let i = 0; i < elements.length; i++) {
  elements[i].classList.add('active');
}

// Menambahkan class 'highlight' ke elemen dengan ID 'my-element'
const element = document.getElementById('my-element');
element.classList.add('highlight');

Contoh Penggunaan

Berikut contoh kode lengkap yang menambahkan class "active" ke semua paragraf di halaman:

  
  



  
Paragraf pertama
  
Paragraf kedua
  
Paragraf ketiga

  

Kesimpulan

Menambahkan class yang sama ke beberapa elemen di JavaScript sangat mudah dilakukan menggunakan metode classList.add(). Dengan memanfaatkan metode ini, kita dapat dengan mudah mengelola gaya dan tampilan elemen-elemen HTML di halaman web kita.