Add Style To All Class Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

33

Share

Menambahkan Style ke Semua Class dengan JavaScript

Dalam pengembangan web, terkadang kita perlu menambahkan style ke semua elemen dengan class tertentu. Ini bisa dilakukan dengan JavaScript. Berikut adalah beberapa cara untuk menambahkan style ke semua class dengan JavaScript:

1. Menggunakan document.querySelectorAll() dan style

Metode ini menggunakan document.querySelectorAll() untuk memilih semua elemen dengan class tertentu dan kemudian menggunakan properti style untuk mengatur style yang diinginkan.

const elements = document.querySelectorAll(".myClass");

elements.forEach(element => {
  element.style.backgroundColor = "red";
  element.style.color = "white";
});

Kode di atas akan mengubah warna latar belakang semua elemen dengan class myClass menjadi merah dan warna teks menjadi putih.

2. Menggunakan document.getElementsByClassName() dan style

Metode ini mirip dengan metode pertama, tetapi menggunakan document.getElementsByClassName() untuk memilih elemen dengan class tertentu.

const elements = document.getElementsByClassName("myClass");

for (let i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = "red";
  elements[i].style.color = "white";
}

Kode di atas juga akan mengubah warna latar belakang semua elemen dengan class myClass menjadi merah dan warna teks menjadi putih.

3. Menggunakan classList.add()

Metode ini menggunakan classList.add() untuk menambahkan class baru ke semua elemen dengan class tertentu. Class baru ini kemudian dapat digunakan untuk mengatur style menggunakan CSS.

const elements = document.querySelectorAll(".myClass");

elements.forEach(element => {
  element.classList.add("myStyle");
});

Kode di atas akan menambahkan class myStyle ke semua elemen dengan class myClass. Anda kemudian dapat mengatur style untuk class myStyle di file CSS Anda.

.myStyle {
  background-color: red;
  color: white;
}

4. Menggunakan style.setProperty()

Metode ini menggunakan style.setProperty() untuk mengatur properti style tertentu ke semua elemen dengan class tertentu.

const elements = document.querySelectorAll(".myClass");

elements.forEach(element => {
  element.style.setProperty("background-color", "red");
  element.style.setProperty("color", "white");
});

Kode di atas akan mengubah warna latar belakang dan warna teks semua elemen dengan class myClass.

Kesimpulan

Metode-metode di atas memungkinkan Anda untuk menambahkan style ke semua class dengan JavaScript. Pilih metode yang paling sesuai dengan kebutuhan Anda.