Comment vérifier efficacement si un élément JavaScript contient une classe spécifique ?

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

Vérifier si un élément contient une classe spécifique en JavaScript est une tâche courante. Bien qu'il soit possible d'utiliser des instructions switch pour comparer l'attribut de classe de l'élément, cette méthode présente des limites lorsqu'il s'agit d'éléments qui ont plusieurs classes.

Pour une solution plus robuste, envisagez d'utiliser la méthode element.classList.contains :

element.classList.contains('class-name');

Cette méthode renvoie true si l'élément a la classe spécifiée et false sinon. Il prend en charge tous les navigateurs modernes et propose des polyfills pour les navigateurs plus anciens.

Approche alternative :

Si vous devez prendre en charge des navigateurs plus anciens et que les polyfills ne sont pas une option, vous pouvez utilisez la méthode indexOf modifiée suivante :

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

Cette méthode garantit que la recherche est effectuée dans l'ensemble de l'attribut de classe, empêchant ainsi les erreurs positifs des correspondances partielles.

Application à l'exemple :

Dans l'exemple fourni, nous pouvons utiliser la méthode hasClass pour simplifier le code et obtenir le résultat souhaité :

var test = document.getElementById('test');

for (var i = 0, j = classes.length; i < j; i++) {
  if (hasClass(test, classes[i])) {
    test.innerHTML = 'I have ' + classes[i];
    break;
  }
}

Ce code parcourt le tableau de classes et vérifie si l'une d'entre elles est contenue dans l'attribut de classe de l'élément. C'est une solution plus efficace et plus flexible que l'utilisation d'instructions switch ou de correspondance de chaînes.

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!