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

Existe-t-il une méthode pour vérifier si un élément HTML contient une classe spécifique en JavaScript ?

Problème :

Les débutants en JavaScript s'appuient souvent sur la comparaison de la propriété className pour déterminer si un élément contient une classe particulière. Cependant, cette approche échoue lorsque l'élément a plusieurs classes et que la classe souhaitée n'est pas la seule présente.

Solution :

Pour résoudre ce problème, JavaScript fournit le propriété classList et la méthode contain. La propriété classList renvoie une liste de classes appliquées à l'élément et la méthode contain vérifie si une classe spécifique est incluse dans cette liste.

const element = document.getElementById("test");
const hasClass1 = element.classList.contains("class1");

Cette approche fonctionne de manière fiable quel que soit le nombre de classes présentes sur l'élément. element.

Approches alternatives :

Si classList n'est pas pris en charge dans le navigateur cible, une méthode alternative l'utilisation de la fonction indexOf peut être utilisée :

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

Implémentation :

Pour appliquer cette approche à l'exemple fourni dans la question, remplacez l'instruction switch d'origine par la code suivant :

const element = document.getElementById("test");
const classes = ["class1", "class2", "class3", "class4"];

element.textContent = "";

for (let i = 0; i < classes.length; i++) {
  if (element.classList.contains(classes[i])) {
    element.textContent = `I have ${classes[i]}`;
    break;
  }
}

Ce code parcourt les classes attendues et affiche la première qui est présente sur l'élément.

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!