Bagaimana untuk Menambah Kelas Baharu pada Elemen HTML Tanpa Mengganti Kelas Sedia Ada?

Cara Menambah Kelas Tambahan pada Elemen Sedia Ada

Objektif:
Tingkatkan elemen HTML dengan kelayakan kelas tambahan.

Senario:
Diberikan elemen dengan kelas sedia ada, kami menyasarkan untuk menambah kelas baharu tanpa menimpa kelas asal.

Penyelesaian:

Untuk Penyemak Imbas Moden

Menggunakan sifat classList , anda boleh dengan mudah menambah kelas pada elemen:

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

Begitu juga, untuk mengalih keluar class:

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

Untuk Sokongan Legasi

Untuk memenuhi pelayar lama seperti Internet Explorer 9, ubah suai sifat className elemen dengan menambahkan ruang diikuti dengan nama kelas baharu. Sebagai prasyarat, tetapkan id kepada elemen untuk akses mudah:

<div>

Kemudian, gunakan JavaScript:

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

Ingat untuk memasukkan ruang utama sebelum "kelas lain" untuk mengekalkan sedia ada kelayakan kelas.

Pertimbangan Tambahan

Rujuk Rangkaian Pembangun Mozilla (MDN) untuk dokumentasi komprehensif tentang element.className.

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