Comment puis-je vérifier de manière fiable la présence d'une classe spécifique en JavaScript ?

Détermination de la présence d'une classe d'élément en JavaScript

Lors de l'inspection des attributs de classe d'un élément, il est souvent nécessaire de vérifier s'il contient une classe spécifique. Le code fourni utilise une instruction switch pour examiner la valeur de classe exacte d'un élément, mais cette approche ne parvient pas à détecter les correspondances partielles.

Pour résoudre cette limitation, envisagez d'utiliser la méthode element.classList .contains. Cette méthode accepte un nom de classe comme paramètre et renvoie un booléen indiquant sa présence dans la liste des classes de l'élément :

element.classList.contains(class);

Cette méthode est universellement prise en charge par les navigateurs modernes et fournit un moyen cohérent de vérifier l'inclusion de classe.

Alternativement, pour des raisons de compatibilité avec les navigateurs plus anciens dépourvus de la méthode .contains, vous pouvez utiliser la version modifiée suivante de indexOf méthode :

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

Cette modification garantit que vous détectez avec précision les correspondances partielles, évitant ainsi les faux positifs lorsque la classe que vous recherchez fait partie d'un nom de classe plus grand.

Application de cette méthode à l'exemple fourni :

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

En employant la méthode .contains ou la fonction indexOf modifiée, vous pouvez déterminer de manière fiable si un élément contient une classe spécifique en JavaScript, indépendamment de compatibilité du navigateur ou de présence de correspondances partielles.

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!