Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memeriksa dengan Amanah sama ada Elemen JavaScript Mengandungi Kelas Tertentu?

Bagaimana untuk Memeriksa dengan Amanah sama ada Elemen JavaScript Mengandungi Kelas Tertentu?

DDD
Lepaskan: 2024-12-24 18:42:59
asal
933 orang telah melayarinya

How to Reliably Check if a JavaScript Element Contains a Specific Class?

Bagaimana untuk Semak sama ada Elemen Mengandungi Kelas dalam JavaScript?

Masalah:

Mengesahkan jika elemen mempunyai kelas tertentu adalah keperluan biasa dalam JavaScript. Walau bagaimanapun, bergantung semata-mata pada perbandingan sifat className, seperti yang ditunjukkan dalam contoh yang disediakan, goyah apabila elemen tersebut memegang berbilang kelas.

Penyelesaian:

Untuk memastikan kehadiran secara berkesan kelas tertentu, tanpa mengira jumlah bilangan kelas yang diberikan kepada elemen, gunakan classList.contains kaedah.

element.classList.contains(className);
Salin selepas log masuk

Kaedah ini berfungsi dengan sempurna merentas penyemak imbas moden dan polyfill tersedia untuk memenuhi pelayar lama.

Pendekatan Alternatif:

Untuk keserasian yang lebih luas, pertimbangkan untuk menggunakan indexOf dengan sedikit pengubahsuaian:

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

Pelarasan ini memastikan padanan nama kelas separa tidak menghasilkan keputusan yang salah.

Demo:

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;
    }
}
Salin selepas log masuk

Dalam ini contoh, kod mengenal pasti dan memaparkan kelas yang terdapat dalam elemen dengan cekap, walaupun ia disertai oleh yang lain. kelas.

Atas ialah kandungan terperinci Bagaimana untuk Memeriksa dengan Amanah sama ada Elemen JavaScript Mengandungi Kelas Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan