Bagaimana untuk Semak Kehadiran Kelas dalam Elemen HTML Menggunakan JavaScript?

Menyemak Kehadiran Kelas Elemen dengan JavaScript

Dalam JavaScript, menentukan sama ada elemen HTML mempunyai kelas tertentu boleh dicapai dengan mudah menggunakan pelayar moden' objek senarai kelas yang wujud. Kaedah classList .contains() membolehkan anda mengesahkan kehadiran kelas pada elemen. Sintaksnya adalah seperti berikut:

element.classList.contains(class);

Pendekatan ini disokong oleh semua penyemak imbas semasa dan polyfill tersedia untuk penyemak imbas lama.

Pendekatan Alternatif untuk Penyemak Imbas Warisan

Jika keserasian dengan penyemak imbas lama adalah penting dan anda lebih suka mengelakkan polifill, kaedah alternatif menggunakan indexOf() tersedia:

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

Pendekatan yang dioptimumkan ini memastikan bahawa hanya padanan kelas yang tepat dikesan, menghalang positif palsu daripada padanan kelas separa.

Menggunakan Penyelesaian pada Contoh Disediakan

Dalam contoh yang disediakan, pernyataan suis tidak boleh digunakan dengan classList dan indexOf kaedah. Walau bagaimanapun, anda boleh mencapai hasil yang sama dengan kod berikut:

var test = document.getElementById("test"),
    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;
    }
}

Kod yang disemak ini lebih ringkas dan menghapuskan semakan berlebihan sambil mengenal pasti kehadiran kelas dalam elemen HTML dengan tepat.

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