Add Class To Element Javascript Using Id

MUAZHAN

2 min read

·

Jun 22, 2024

40

Share

Menambahkan Class ke Elemen JavaScript Menggunakan ID

Dalam pengembangan web, sering kali kita perlu memanipulasi tampilan dan perilaku elemen HTML dengan JavaScript. Salah satu cara untuk melakukan hal ini adalah dengan menambahkan kelas ke elemen. Artikel ini akan membahas cara menambahkan kelas ke elemen HTML menggunakan ID dengan JavaScript.

Cara Kerja

JavaScript memungkinkan kita untuk mengakses elemen HTML menggunakan ID-nya. Setelah kita menemukan elemen yang diinginkan, kita dapat memodifikasi atributnya, termasuk kelas.

Kode

// Temukan elemen dengan ID "myElement"
const myElement = document.getElementById("myElement");

// Tambahkan kelas "newClass" ke elemen 
myElement.classList.add("newClass"); 

Penjelasan Kode

1. document.getElementById("myElement"): Mencari elemen HTML dengan ID "myElement" dan menyimpannya dalam variabel myElement.
2. myElement.classList.add("newClass"): Metode classList.add() menambahkan kelas baru ("newClass") ke daftar kelas elemen myElement.

Contoh

  
  



  
Ini adalah paragraf.

  

Dalam contoh ini, paragraf dengan ID "myElement" akan diberi kelas "myClass". Hal ini akan mengubah warna latar belakang menjadi kuning dan warna teks menjadi biru, sesuai dengan aturan CSS yang telah ditentukan.

Kesimpulan

Menambahkan kelas ke elemen HTML menggunakan ID dengan JavaScript merupakan teknik yang umum digunakan untuk memanipulasi tampilan dan perilaku elemen. Teknik ini memberikan kontrol yang lebih baik atas elemen-elemen HTML dan memungkinkan Anda untuk membuat halaman web yang dinamis dan interaktif.