Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Semak Kehadiran Kelas dalam Elemen HTML Menggunakan JavaScript?

Bagaimana untuk Semak Kehadiran Kelas dalam Elemen HTML Menggunakan JavaScript?

Susan Sarandon
Susan Sarandonasal
2024-11-19 17:57:031055semak imbas

How to Check for the Presence of a Class in an HTML Element Using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn