W3schools Add Class Javascript

W3schools Add Class Javascript

3 min read Jun 18, 2024
W3schools Add Class Javascript

Menambahkan Class dengan JavaScript di w3schools

w3schools adalah sumber daya yang luar biasa untuk belajar tentang HTML, CSS, dan JavaScript. Dalam tutorial ini, kita akan mempelajari cara menambahkan class pada elemen HTML menggunakan JavaScript di w3schools.

Cara Menambahkan Class dengan JavaScript

Ada beberapa cara untuk menambahkan class pada elemen HTML menggunakan JavaScript:

  1. Menggunakan classList.add(): Metode ini menambahkan class baru pada daftar class yang ada pada elemen.

    const element = document.getElementById("myElement");
    element.classList.add("newClass");
    

    Contoh ini akan menambahkan class "newClass" pada elemen dengan id "myElement".

  2. Menggunakan className: Properti ini mengakses daftar class dari elemen. Anda dapat menambahkan class baru dengan menggabungkan string yang ada dengan class baru yang ingin ditambahkan.

    const element = document.getElementById("myElement");
    element.className += " newClass";
    

    Contoh ini akan menambahkan class "newClass" pada elemen dengan id "myElement".

  3. Menggunakan setAttribute(): Metode ini menetapkan atribut pada elemen.

    const element = document.getElementById("myElement");
    element.setAttribute("class", "newClass");
    

    Contoh ini akan menetapkan class "newClass" pada elemen dengan id "myElement".

Keuntungan Menggunakan classList.add()

Metode classList.add() adalah cara yang direkomendasikan untuk menambahkan class pada elemen karena beberapa alasan:

  • Lebih mudah dibaca dan dipahami: Metode ini lebih mudah dibaca dan dipahami daripada menggunakan className.
  • Lebih fleksibel: Metode ini memungkinkan Anda untuk menambahkan beberapa class sekaligus.
  • Lebih efisien: Metode ini lebih efisien daripada menggunakan className karena tidak memerlukan penggabungan string.

Contoh Penggunaan

Berikut adalah contoh lengkap yang menunjukkan cara menambahkan class pada elemen HTML menggunakan JavaScript di w3schools:








Ini adalah paragraf.

Ketika tombol "Tambahkan Class" ditekan, fungsi addClass() akan dipanggil, yang akan menambahkan class "newClass" pada paragraf. Ini akan mengubah latar belakang paragraf menjadi kuning.

Kesimpulan

Menambahkan class pada elemen HTML menggunakan JavaScript sangat berguna untuk memanipulasi gaya dan perilaku elemen. Metode classList.add() adalah cara yang direkomendasikan untuk menambahkan class pada elemen karena lebih mudah dibaca, lebih fleksibel, dan lebih efisien.

Related Post