Comment vérifier la présence d'une classe dans un élément HTML à l'aide de JavaScript ?

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

En JavaScript, déterminer si un élément HTML possède une classe particulière peut être facilement réalisé à l'aide des navigateurs modernes objet classList inhérent. La méthode classList .contains() permet de vérifier la présence d'une classe sur un élément. Sa syntaxe est la suivante :

element.classList.contains(class);

Cette approche est prise en charge par tous les navigateurs actuels et les polyfills sont disponibles pour les navigateurs plus anciens.

Approche alternative pour les navigateurs existants

Si la compatibilité avec les anciens navigateurs est cruciale et que vous préférez éviter les polyfills, une méthode alternative utilisant indexOf() est disponible :

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

Cette approche optimisée garantit que seules les correspondances de classe exactes sont détectées, évitant ainsi les faux positifs provenant de correspondances de classe partielles.

Application des solutions à l'exemple fourni

Dans l'exemple fourni, l'instruction switch ne peut pas être utilisée avec les méthodes classList et indexOf. Cependant, vous pouvez obtenir le même résultat avec le code suivant :

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

Ce code révisé est plus concis et élimine les vérifications redondantes tout en identifiant avec précision la présence de la classe dans l'élément HTML.

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!