Bagaimanakah Anda Boleh Menentukan Kehadiran Kelas dengan Cekap dalam Elemen HTML?

Menentukan Kehadiran Kelas dalam Elemen

Mengenal pasti keahlian kelas elemen adalah penting untuk penggayaan CSS dan manipulasi HTML dinamik. Walaupun JavaScript menyediakan kaedah untuk mendapatkan semula atribut className elemen, menyemak kewujudannya menimbulkan cabaran apabila berurusan dengan berbilang kelas.

Pendekatan Sedia Ada:

Pada masa ini, pendekatan biasa melibatkan :

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  // ...
  default:
    test.innerHTML = "";
}

Walau bagaimanapun, kaedah ini gagal apabila elemen mempunyai berbilang kelas, kerana ia hanya sepadan dengan padanan tepat.

Menggunakan element.classList.contains:

Penyelesaian yang lebih disesuaikan adalah dengan menggunakan kaedah element.classList.contains:

element.classList.contains(class);

Kaedah ini disokong oleh semua penyemak imbas moden dan menyediakan cara ringkas untuk mengesahkan keahlian kelas.

Fungsi Tersuai Menggunakan indexOf:

Untuk pelayar lama tanpa sokongan classList, fungsi tersuai menggunakan indexOf boleh digunakan:

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

Fungsi ini memastikan bahawa yang dinyatakan kelas berada dalam atribut className elemen, walaupun ia sebahagian daripada nama kelas yang lain.

Pendekatan Alternatif Menggunakan Gelung:

Jika anda lebih suka menggabungkan fungsi ini dengan penyataan suis, anda boleh mengulangi pelbagai nama kelas yang berpotensi:

var test = document.getElementById("test");
var classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

Pendekatan ini memberikan lebih fleksibiliti dan mengelakkan kes suis berulang.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menentukan Kehadiran Kelas dengan Cekap dalam Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!