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.
// 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
function hasClass( elem, klass ) {
return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}
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.
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.
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.
cette 2018 utilise ES6
const hasClass = (el, className) => el.classList.contains(className);
Comment utiliser
hasClass(document.querySelector('div.active'), 'active'); // true