Add Style Class To Div Javascript

3 min read Jun 22, 2024

Menambahkan Class Style ke Div dengan JavaScript

Dalam pengembangan web, menambahkan style ke elemen HTML dengan JavaScript adalah praktik yang umum untuk membuat halaman web yang dinamis dan interaktif. Salah satu cara untuk melakukannya adalah dengan menambahkan class style ke elemen div menggunakan JavaScript. Artikel ini akan membahas cara menambahkan class style ke div dengan JavaScript.

Cara Menambahkan Class Style ke Div dengan JavaScript

Berikut adalah langkah-langkah umum untuk menambahkan class style ke div dengan JavaScript:

Dapatkan Referensi ke Elemen Div:
- Gunakan metode document.getElementById() untuk mendapatkan referensi ke elemen div dengan ID tertentu.
- Gunakan metode document.querySelector() untuk mendapatkan referensi ke elemen div pertama yang cocok dengan selector CSS yang diberikan.
Tambahkan Class Style ke Elemen Div:
- Gunakan metode classList.add() untuk menambahkan class style baru ke elemen div.
- Anda dapat menambahkan beberapa class style dengan memisahkan nama class dengan spasi.

Contoh Kode

Berikut adalah contoh kode untuk menambahkan class style "highlight" ke elemen div dengan ID "myDiv":

// Dapatkan referensi ke elemen div dengan ID "myDiv"
const myDiv = document.getElementById("myDiv");

// Tambahkan class style "highlight" ke elemen div
myDiv.classList.add("highlight");

Contoh Penggunaan

HTML:

Ini adalah teks di dalam div.

CSS:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

JavaScript:

const myDiv = document.getElementById("myDiv");
myDiv.classList.add("highlight");

Setelah menjalankan kode JavaScript di atas, teks di dalam elemen div dengan ID "myDiv" akan memiliki latar belakang kuning dan teks tebal, sesuai dengan style yang didefinisikan dalam class "highlight".

Tips Tambahan

Anda dapat menggunakan metode classList.remove() untuk menghapus class style dari elemen div.
Anda dapat menggunakan metode classList.toggle() untuk menambahkan atau menghapus class style dari elemen div, tergantung pada apakah class style tersebut sudah ada atau tidak.
Anda dapat menggunakan metode classList.contains() untuk memeriksa apakah elemen div memiliki class style tertentu.

Kesimpulan

Menambahkan class style ke div dengan JavaScript memungkinkan Anda untuk membuat halaman web yang dinamis dan interaktif dengan mudah. Dengan menggunakan metode classList.add(), Anda dapat menambahkan class style baru ke elemen div dan mengubah penampilannya sesuai kebutuhan.