Bagaimana untuk Menambah Kelas pada Elemen HTML Menggunakan JavaScript?

Menambahkan Kelas pada Elemen dalam JavaScript

Pengenalan:
Meningkatkan kefungsian elemen pada halaman web selalunya melibatkan memanipulasi kelas CSSnya. Menambah kelas baharu boleh memberikan gaya atau gelagat tambahan kepada elemen tersebut. Jawapan ini menerangkan cara menambahkan kelas pada elemen menggunakan JavaScript, dengan mengambil kira sokongan untuk penyemak imbas moden dan penyemak imbas warisan.

Pelayar Moden (Element.classList)
Untuk penyemak imbas moden, termasuk Chrome, Firefox dan Safari, kaedah element.classList.add() menyediakan cara yang cekap untuk menambah kelas pada elemen:

element.classList.add("my-class");

Untuk mengalih keluar kelas kemudian hari:

element.classList.remove("my-class");

Pelayar Warisan (PropertyNama Kelas)
Untuk penyemak imbas seperti Internet Explorer 9 dan lebih rendah , sifat className elemen boleh digunakan untuk menambah kelas baharu:

var d = document.getElementById("div1");
d.className += " otherclass";

Pastikan terdapat ruang sebelum nama kelas baharu untuk mengelak menjejaskan kelas sedia ada dalam senarai.

Nota: Sifat element.className boleh digunakan dalam penyemak imbas moden juga, tetapi classList secara amnya ialah pendekatan yang lebih bersih dan cekap.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Kelas pada Elemen HTML Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!