Quelle est la meilleure façon de vérifier si un élément a une classe?

Le problème

Si l'élément a plusieurs classes, alors elle ne sera pas correspondre à la valeur de la propriété de la vérification, donc je suis à la recherche de la meilleure façon de vérifier si l'objet a une classe en particulier dans l'élément de la propriété className.

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 quelle serait la meilleure façon de le faire?

juste pur javascript, veuillez

Vous pouvez utiliser des regex pour le nom complet de la classe. Pour les regex, vous pouvez vous référer à cette stackoverflow.com/questions/2232934/...
double possible de Tester si un élément contient une classe? - s'il vous plaît utiliser la fonction de recherche avant de poser une nouvelle question.

InformationsquelleAutor Adam | 2012-06-09

dom javascript

38
```
function hasClass( elem, klass ) {
     return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}
```
- C'est de cette façon jQuery hasClass fonctionne en arrière-plan.
- Assez sûr de jQuery version normalise l'espace séparateurs dans les .className valeur première. Cela pourrait échouer si un onglet ou une autre caractère d'espace a été utilisé pour séparer les classes.
InformationsquelleAutor Esailija
26

Dans les navigateurs modernes, vous pouvez utiliser classList:
```
if (element.classList.contains("hello")) {
   //do something
}  
```
Dans le navigateur qui n'est pas de mettre en œuvre classList mais expose les DOM prototype, vous pouvez utiliser la cale a montré dans le lien.

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

InformationsquelleAutor ZER0

ce 2018 utilisation ES6

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

Comment utiliser

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

InformationsquelleAutor Gor

0

Vous demandez pur javascript, donc, c'est comment jQuery en œuvre:
```
    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], pour s'assurer que les méthodes de délimitation des noms de classe ne sont pas un problème. this serait de jQuery référence à l'objet(s) et dans un sens, elle rend le code plus compliqué que nécessaire, mais il doit faire sens, sans en connaître les détails.
- Avez-vous, par hasard, copié à partir de jQuery? ce n' this référence? où est rclass défini?
- Je le mentionne dans mon commentaire tout à fait clairement que oui, il s'agit de jQuery. Vous soulevez un bon point sur rclass, je n'ai pas le remarquer, je vais mettre à jour la réponse
InformationsquelleAutor Steve

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 va parcourir le DOM et la recherche de classes défini comme paramètre dans la fonction principale.Ensuite, il permettra de tester chaque fondée éléments de classe avec une expression régulière pattern. Si il fonde pousser à un tableau, et affichera les résultats.

InformationsquelleAutor Endre Simo

-1

D'abord, diviser la classe en utilisant le "caractère", puis vérifiez l'indice de la classe que vous souhaitez trouver.
```
function hasClass(element, clazz) {
    return element.className.split(" ").indexOf(clazz) > -1;
}
```
- Ne pas travailler hors de la boîte dans IE8 et en dessous (indexOf n'est pas pris en charge pour les tableaux).
InformationsquelleAutor Rodolphe BELOUIN

Vous devez vous connecter pour publier un commentaire.