Wie kann ich effizient prüfen, ob ein JavaScript-DOM-Element eine bestimmte Klasse enthält?

Überprüfen, ob ein Element eine Klasse in JavaScript enthält

In JavaScript kann es vorkommen, dass Sie feststellen müssen, ob ein DOM-Element eine Klasse enthält eine bestimmte Klasse. Obwohl Ihr aktueller Ansatz mit element.className und einer switch-Anweisung funktionieren kann, weist er Einschränkungen auf, wenn ein Element mehrere Klassen hat.

Verwendung von element.classList.contains()

Für eine bessere browserübergreifende Kompatibilität können Sie die Methode element.classList.contains() verwenden:

element.classList.contains(className);

Diese Methode gibt a zurück boolescher Wert, der angibt, ob das Element die angegebene Klasse hat. Es wird in allen gängigen Browsern unterstützt.

Alternativer Ansatz mit indexOf

Wenn Sie mit älteren Browsern arbeiten, die element.classList nicht unterstützen, können Sie Änderungen vornehmen Ihr bestehender indexOf-Ansatz wie folgt:

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

Dadurch wird sichergestellt, dass die Prüfung nur dann „true“ zurückgibt, wenn die gesuchte Klasse nicht in einer anderen Klasse enthalten ist Name.

Beispielimplementierung

Anwenden der aktualisierten Techniken auf Ihr Beispiel:

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

Dieser Ansatz behandelt den Fall, in dem das Testelement mehrere hat Klassen, um sicherzustellen, dass die richtige Klasse erkannt wird, auch wenn ihre Reihenfolge oder zusätzliche Klassen vorhanden sind.

Das obige ist der detaillierte Inhalt vonWie kann ich effizient prüfen, ob ein JavaScript-DOM-Element eine bestimmte Klasse enthält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!