Comment vérifier de manière fiable si un élément JavaScript contient une classe spécifique ?

Comment vérifier si un élément contient une classe en JavaScript ?

Problème :

Vérifier si un élément possède une classe spécifique est une exigence courante en JavaScript. Cependant, s'appuyer uniquement sur les comparaisons de propriétés className, comme le démontre l'exemple fourni, échoue lorsque l'élément contient plusieurs classes.

Solution :

Pour vérifier efficacement la présence de une classe particulière, quel que soit le nombre total de classes affectées à l'élément, utilise la méthode classList.contains.

element.classList.contains(className);

Cette méthode fonctionne parfaitement dans les navigateurs modernes, et les polyfills sont disponibles pour répondre aux navigateurs plus anciens.

Approche alternative :

Pour une compatibilité plus large, envisagez d'utiliser indexOf avec une légère modification :

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

Cet ajustement garantit que les correspondances partielles de noms de classe ne donnent pas de résultats erronés. résultats.

Démo :

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

Dans cet exemple, le code identifie et affiche efficacement la classe présente au sein de l'élément, même si elle est accompagnée d'autres classes.

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!