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

Question

En utilisant un simple JavaScript (pas jQuery), existe-t-il un moyen de vérifier si un élément contient un cours ?

Actuellement, je fais ça :

var test = document.getElementById("test");
var testClass = test.className;

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  case "class2":
    test.innerHTML = "I have class2";
    break;
  case "class3":
    test.innerHTML = "I have class3";
    break;
  case "class4":
    test.innerHTML = "I have class4";
    break;
  default:
    test.innerHTML = "";
}

<div id="test" class="class1"></div>

Le problème est que si je change le HTML en ceci...

<div id="test" class="class1 class5"></div>

...il n'y a plus de correspondance exacte, et j'obtiens donc le résultat par défaut de rien ( "" ). Mais je veux toujours que la sortie soit I have class1 parce que le <div> toujours contient le site .class1 classe.

Answer 1

Utilisez element.classList .contains méthode :

element.classList.contains(class);

Cela fonctionne sur tous les navigateurs actuels et il existe des polyfills pour prendre en charge les navigateurs plus anciens également.

---

Ou bien Si vous travaillez avec des navigateurs plus anciens et que vous ne souhaitez pas utiliser les polyfills pour les corriger, l'utilisation de l'option indexOf est correcte, mais vous devez la modifier un peu :

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

Sinon, vous obtiendrez également true si la classe que vous recherchez fait partie d'un autre nom de classe.

DEMO

jQuery utilise une méthode similaire (si ce n'est la même).

---

Appliqué à l'exemple :

Comme cela ne fonctionne pas avec l'instruction switch, vous pouvez obtenir le même effet avec ce code :

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

C'est aussi moins redondant ;)

Answer 2

Comme il veut utiliser switch(), je suis surpris que personne ne l'ait encore proposé :

var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
    switch(testClasses[i]) {
        case "class1": test.innerHTML += "I have class1<br/>"; break;
        case "class2": test.innerHTML += "I have class2<br/>"; break;
        case "class3": test.innerHTML += "I have class3<br/>"; break;
        case "class4": test.innerHTML += "I have class4<br/>"; break;
        default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
    }
}

Answer 3

C'est un peu vieux, mais peut-être que quelqu'un trouvera ma solution utile :

// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement) {
        if (this == null) throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) return -1;
        var n = 0;
        if (arguments.length > 0) {
            n = Number(arguments[1]);
            if (n != n) n = 0;
            else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
        }
        if (n >= len) return -1;
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
        return -1;
    }
}
// add hasClass support
if (!Element.prototype.hasClass) {
    Element.prototype.hasClass = function (classname) {
        if (this == null) throw new TypeError();
        return this.className.split(' ').indexOf(classname) === -1 ? false : true;
    }
}

Answer 4

className n'est qu'une chaîne de caractères, ce qui permet d'utiliser la commande régulière indexOf pour voir si la liste des classes contient une autre chaîne.

Answer 5

Un oneliner simplifié : 1

function hasClassName(classname,id) {
 return  String ( ( document.getElementById(id)||{} ) .className )
         .split(/\s/)
         .indexOf(classname) >= 0;
}

1 indexOf pour les tableaux n'est pas prise en charge par IE (bien sûr). Il existe de nombreux correctifs de singe à trouver sur le net pour cela.