Wie kann ich in JavaScript überprüfen, ob ein DOM-Element eine Klasse enthält?

Question

Wie kann ich in JavaScript überprüfen, ob ein DOM-Element eine Klasse enthält?

Ich habe den folgenden Code ausprobiert, aber aus irgendeinem Grund funktioniert er nicht...

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

Answer 1

Um den gesamten Wert des Klassenattributs zu erhalten, verwenden Sie .className

Von MDC:

className ermittelt und setzt den Wert des Attributs class des angegebenen Elements.

Seit 2013 erhalten Sie eine zusätzliche helfende Hand.

Vor vielen Jahren, als diese Frage zum ersten Mal beantwortet wurde, .className war die einzige じっさいにある Lösung in reinem JavaScript. Seit 2013, alle Browser unterstützen .classList Schnittstelle.

JavaScript:

if(document.getElementById('element').classList.contains("class_one")) {
    //code...
}

Sie können auch lustige Dinge tun mit classList , wie .toggle() , .add() y .remove() .

MDN-Dokumentation .

Abwärtskompatibler Code:

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

Answer 2

Die benötigte Eigenschaft ist className pas class . Außerdem kann ein Element viele Klassen haben. Wenn Sie also testen wollen, ob es eine bestimmte Klasse hat, müssen Sie etwas wie das Folgende tun:

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
}

UPDATE

Moderne Browser (so gut wie alle wichtigen außer IE <= 9) unterstützen eine classList Eigenschaft, wie in der Antwort von @Dropped.on.Caprica erwähnt. Es ist daher sinnvoll, diese Eigenschaft zu verwenden, wenn sie verfügbar ist. Hier ist ein Beispielcode, der erkennt, ob classList vom Browser unterstützt wird und ansonsten auf den Regex-basierten Code zurückgreift:

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

Answer 3

Alle modernen Browser unterstützen die contains Methode der Element.classList :

testElement.classList.contains(className)

---

Demo

var testElement = document.getElementById('test');

document.body.innerHTML = '<pre>' + JSON.stringify({
    'main' : testElement.classList.contains('main'),
    'cont' : testElement.classList.contains('cont'),
    'content' : testElement.classList.contains('content'),
    'main-cont' : testElement.classList.contains('main-cont'),
    'main-content' : testElement.classList.contains('main-content')
}, null, 2) + '</pre>';

<div id="test" class="main main-content content"></div>

---

Unterstützte Browser

(aus CanIUse.com )

---

Polyfill

Wenn Sie Folgendes verwenden möchten Element.classList und Sie auch alte Browser wie IE8 unterstützen möchten, sollten Sie die Verwendung von dieses Polyfill von Eli Grey .

Answer 4

Es ist die .className 財産 etwa so:

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

Answer 5

Eine bessere Lösung als all diese (wenn Sie HTML5 verwenden) ist die Verwendung der 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')
  }
}