web-dev-qa-db-fra.com

Quel est le meilleur moyen de vérifier si l'élément a une classe?

Le problème

Si l'élément a plusieurs classes, il ne correspondra pas à la vérification régulière de la valeur de la propriété. Je cherche donc le meilleur moyen de vérifier si l'objet a une classe particulière dans la propriété className de l'élément.

Exemple

// element's classname is 'hello world helloworld'
var element = document.getElementById('element');

// this obviously fails
if(element.className == 'hello'){ ... }

// this is not good if the className is just 'helloworld' because it will match
if(element.className.indexOf('hello') != -1){ ... }

Alors, quel serait le meilleur moyen de faire cela?

juste javascript pur s'il vous plaît

javascriptdom
18
Adam
function hasClass( elem, klass ) {
     return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}
37
Esailija

Dans les navigateurs modernes, vous pouvez utiliser classList :

if (element.classList.contains("hello")) {
   // do something
}

Dans le navigateur qui n'implémente pas classList mais expose le prototype du DOM, vous pouvez utiliser la cale affichée dans le lien. 

Sinon, vous pouvez utiliser le même code que shim pour avoir une fonction générique sans manipuler le prototype.

24
ZER0

Cela devrait fonctionner pour vous: 

var a = [];
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];

    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0, j=els.length; i<j; i++)
        if(re.test(els[i].className)) a.Push(els[i]);
        return a;
}

getElementsByClassName('wrapper');
for (var i=0; i< a.length; i++) {
    console.log(a[i].className);
}

Ce code traversera le DOM et recherchera les classes définies en tant que paramètre dans la fonction principale. Il testera ensuite chaque élément de classe fondé avec un motif d'expression rationnelle. Si cela se produit, Push sera envoyé à un tableau et affichera les résultats. 

0
Simo Endre

Vous demandez du javascript pur, voici comment jQuery l'implémente:

    hasClass: function( selector ) {
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
                return true;
            }
        }
        return false;
    },

rclass est une expression régulière de [\n\t\r], afin de garantir que les méthodes alternatives de délimitation des noms de classe ne sont pas un problème. this serait la référence de jQuery au (x) objet (s). Dans un sens, cela rend le code plus compliqué que nécessaire, mais cela devrait avoir du sens sans en connaître les détails.

0
Steve

cette 2018 utilise ES6

const hasClass = (el, className) => el.classList.contains(className);

Comment utiliser

hasClass(document.querySelector('div.active'), 'active'); // true
0
Gor