Comment vérifier efficacement la présence d'une classe d'éléments en JavaScript ?

Vérification de la présence d'une classe d'élément en JavaScript

En utilisant JavaScript de base, comment pouvez-vous déterminer si un élément contient une classe spécifique ? Lors de l'utilisation de la propriété className, une correspondance exacte de classe est requise, ce qui entraîne des limitations lorsqu'un élément a plusieurs classes.

Solution : element.classList.contains

Element. classList expose une méthode .contains spécialement conçue à cet effet :

element.classList.contains(className);

Cette méthode est prise en charge par tous les navigateurs modernes et peut être polyfilled pour les anciennes versions.

Alternative : Utilisation d'indexOf

Vous pouvez également utiliser element.className et indexOf pour les navigateurs plus anciens qui ne prennent pas en charge classList, mais des ajustements mineurs sont nécessaires pour garantir l'exactitude :

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

Cela garantit que la classe recherchée n'est pas une sous-chaîne d'une autre classe nom.

Exemple de code

Pour appliquer cette solution à votre situation spécifique :

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;
    }
}

Ce code utilise une approche plus efficace en parcourant un tableau prédéfini de classes potentielles, réduisant la redondance et améliorant la maintenabilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!