Comment puis-je vérifier en JavaScript si un élément DOM contient une classe?

Comment puis-je vérifier en JavaScript si un élément du DOM contient une classe?

J'ai essayé le code suivant, mais pour une raison que ça ne fonctionne pas...

if (document.getElementById('element').class == "class_one") {
    //code...
}

source d'informationauteur Florian Müller

dom javascript

30

Pour obtenir la totalité de la valeur de l'attribut de classe, l'utilisation .className

De MDC:

className obtient et définit la valeur de l'attribut class de l'élément spécifié.

Depuis 2013, vous obtenez une main secourable.

Il y a plusieurs années, lorsque cette question a d'abord été répondu, .className était le seul réel solution en JavaScript. Depuis 2013, tous les navigateurs prennent en charge .classList interface.

JavaScript:
```
if(document.getElementById('element').classList.contains("class_one")) {
    //code...
}
```
Vous pouvez aussi faire des choses amusantes avec classListcomme .toggle().add() et .remove().

MDN documentation.

Compatible code:
```
if(document.getElementById('element').className.split(" ").indexOf("class_one") >= 0) {
    //code...
}
```

La propriété que vous avez besoin est classNamepas class. Aussi, un élément peut avoir plusieurs classes, donc si vous voulez tester si il a une classe particulière, vous devez faire quelque chose comme ce qui suit:

function hasClass(el, clss) {
    return el.className && new RegExp("(^|\\s)" +
           clss + "(\\s|$)").test(el.className);
}

var element = document.getElementById('element');
if ( hasClass(element, "class_one") ) {
    //Do stuff here
}

Mise à JOUR

Les navigateurs modernes (à peu près tout majeur sauf IE <= 9) de support d'un classList bien, comme mentionné dans @Abandonné.sur.Caprica jusqu'réponse. Il est donc logique d'utiliser ce lieu. Voici un exemple de code qui détecte si classList est pris en charge par le navigateur et retombe à la regex code autrement:

var hasClass = (typeof document.documentElement.classList == "undefined") ?
    function(el, clss) {
        return el.className && new RegExp("(^|\\s)" +
               clss + "(\\s|$)").test(el.className);
    } :
    function(el, clss) {
        return el.classList.contains(clss);
    };

C'est le .className de la propriétécomme ceci:

if (document.getElementById('element').className == "class_one") {
    //code...
}

Une meilleure solution que l'ensemble de ces (si vous utilisez HTML5) est d'utiliser la classList API.

var element = document.getElementById('some-element');

if (element.classList.contains('class-you-want-to-check')) {
  console.log('element has target class')
} else {
  element.classList.add('class-you-want-to-check');
  element.classList.remove('class-you-want-to-check');
  element.classList.toggle('class-you-want-to-check');

  if (element.classList.contains('class-you-want-to-check')) {
    console.log('Yep, classList is baller')
  }
}

toggleClass sur l'élément

var el = document.getElementById('element');
el.classList[['add','remove'][+el.classList.contains('class_one')]]('class_one');

el.classList.toggle('class_one');

0

Si vous utilisez jQuery, juste ce code simple pour vous aider:
```
if ($('.yourclass').length) {
  //do something
} 
```
Si vous voulez vérifier plus de 2 classes à la page, puis utilisez $('.yourclass').length > 2

Vous devez vous connecter pour publier un commentaire.

Depuis 2013, vous obtenez une main secourable.