Add Class To Element Javascript By Id

MUAZHAN

3 min read

·

Jun 22, 2024

37

Share

Menambahkan Class ke Elemen HTML dengan ID Menggunakan JavaScript

Artikel ini akan membahas cara menambahkan class ke elemen HTML yang memiliki ID menggunakan JavaScript.

Metode 1: Menggunakan classList.add()

Metode ini adalah cara paling umum dan mudah untuk menambahkan class ke elemen HTML.

Langkah-langkah:

1. Dapatkan elemen HTML: Gunakan metode document.getElementById() untuk mendapatkan elemen HTML yang ingin Anda tambahkan classnya.
2. Tambahkan class: Gunakan metode classList.add() untuk menambahkan class baru ke elemen tersebut.

Contoh:

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

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

Metode 2: Menggunakan className

Metode ini lebih klasik dan menggunakan properti className dari elemen HTML.

Langkah-langkah:

1. Dapatkan elemen HTML: Gunakan metode document.getElementById() untuk mendapatkan elemen HTML yang ingin Anda tambahkan classnya.
2. Tambahkan class: Tambahkan class baru ke properti className dari elemen tersebut. Gunakan spasi untuk memisahkan class yang sudah ada dengan class baru.

Contoh:

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

// Tambahkan class "newClass" ke elemen tersebut
myElement.className += " newClass";

Perbedaan Metode 1 dan Metode 2

Metode classList.add() lebih disarankan karena memiliki beberapa keuntungan:

• Lebih mudah digunakan: Kode lebih mudah dibaca dan dipahami.
• Lebih efisien: Metode ini lebih cepat dan efisien dibandingkan dengan metode className.
• Lebih fleksibel: Metode ini memungkinkan Anda untuk mengelola class dengan mudah, seperti menambahkan, menghapus, atau mengganti class.

Penting:

• Pastikan elemen HTML yang ingin Anda tambahkan classnya memiliki ID yang unik.
• Jangan lupa untuk menjalankan kode JavaScript setelah elemen HTML dimuat.

Contoh Penggunaan

Berikut adalah contoh penggunaan untuk menambahkan class "active" ke elemen dengan ID "myButton":

Klik Saya

Kode JavaScript ini akan menambahkan class "active" ke elemen <button> dengan ID "myButton".

Kesimpulan

Dengan menggunakan metode classList.add() atau className, Anda dapat dengan mudah menambahkan class ke elemen HTML yang memiliki ID menggunakan JavaScript. Metode classList.add() merupakan cara yang lebih disarankan karena lebih mudah digunakan, lebih efisien, dan lebih fleksibel.