Prüfen, ob ein Element eine Klasse in JavaScript enthält?

Question

Mit einfachen JavaScript (nicht jQuery), Gibt es eine Möglichkeit zu überprüfen, ob ein Element enthält eine Klasse?

Derzeit mache ich das:

var test = document.getElementById("test");
var testClass = test.className;

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  case "class2":
    test.innerHTML = "I have class2";
    break;
  case "class3":
    test.innerHTML = "I have class3";
    break;
  case "class4":
    test.innerHTML = "I have class4";
    break;
  default:
    test.innerHTML = "";
}

<div id="test" class="class1"></div>

Das Problem ist, dass, wenn ich den HTML-Code so ändere...

<div id="test" class="class1 class5"></div>

...gibt es keine exakte Übereinstimmung mehr, so dass ich die Standardausgabe von nichts erhalte ( "" ). Aber ich möchte trotzdem, dass die Ausgabe so aussieht I have class1 weil die <div> toujours enthält die .class1 Klasse.

Answer 1

Utilisez element.classList .contains Methode:

element.classList.contains(class);

Dies funktioniert auf allen aktuellen Browsern und es gibt Polyfills, um auch ältere Browser zu unterstützen.

---

Alternativ dazu Wenn Sie mit älteren Browsern arbeiten und keine Polyfills verwenden wollen, um sie zu reparieren, können Sie mit indexOf ist richtig, aber Sie müssen es ein wenig abändern:

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

Andernfalls erhalten Sie auch true wenn die gesuchte Klasse Teil eines anderen Klassennamens ist.

DEMO

jQuery verwendet eine ähnliche (wenn auch nicht dieselbe) Methode.

---

Angewandt auf das Beispiel:

Da dies nicht zusammen mit der switch-Anweisung funktioniert, können Sie den gleichen Effekt mit diesem Code erzielen:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

Es ist auch weniger redundant ;)

Answer 2

Die einfache und effektive Lösung ist der Versuch .enthält Methode.

test.classList.contains(testClass);

Answer 3

In modernen Browsern können Sie einfach die contains Methode der Element.classList :

testElement.classList.contains(className)

---

Demo

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

console.log({
    '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'),
    'main main-content' : testElement.classList.contains('main main-content')
});

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

---

Unterstützte Browser

(aus CanIUse.com )

---

Polyfill

Wenn Sie Folgendes verwenden möchten Element.classList aber Sie möchten auch ältere Browser unterstützen, dann sollten Sie die Verwendung von dieses Polyfill por Eli Grey .

Answer 4

Diese Frage wird ziemlich eindeutig beantwortet durch element.classList.contains() aber die Leute waren ziemlich extravagant mit ihren Antworten und stellten einige gewagte Behauptungen auf, also habe ich einen Benchmark durchgeführt .

Bedenken Sie, dass jeder Test 1000 Iterationen durchläuft, so dass die meisten dieser Tests immer noch sehr schnell sind. Solange Sie sich nicht ausgiebig auf diese Funktion verlassen, werden Sie keinen Leistungsunterschied feststellen.

Ich habe einige Tests mit praktisch jeder Möglichkeit, dies zu tun. Auf meiner Maschine, (Win 10, 24gb, i7-8700), classList.contains durchgeführt super gut. So tat className.split(' '), die effektiv das gleiche ist.

Der Gewinner ist jedoch classList.contains() . Wenn Sie nicht prüfen, ob classList als undefined , ~(' ' + v.className + ' ').indexOf(' ' + classToFind + ' ') schleicht sich um 5-15% vor

Answer 5

Element.matches()

element.matches(selectorString)

Según MDN-Webdokumente :

El Element.matches() Methode gibt zurück true wenn das Element durch die angegebene Selektorzeichenkette ausgewählt werden würde; andernfalls wird false .

Sie können daher Folgendes verwenden Element.matches() um festzustellen, ob ein Element eine Klasse enthält.

const element = document.querySelector('#example');

console.log(element.matches('.foo')); // true

<div id="example" class="foo bar"></div>

Browser-Kompatibilität anzeigen