Wie überprüfe ich, ob ein Element eine bestimmte Klasse in JavaScript enthält?

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

Bei der Arbeit mit Elementen in JavaScript ist es oft nützlich, zu überprüfen, ob ein Element vorhanden ist enthält eine bestimmte Klasse.

Das Problem:

Die Verwendung der herkömmlichen Methode zum Vergleichen der className-Eigenschaft des Elements mit dem genauen Klassennamen führt zu falsch positiven Ergebnissen, wenn das Element mehrere enthält Klassen. Wenn das Element beispielsweise die Klasse class1 hat und der Code nach Klasse1 sucht, wird false zurückgegeben, wenn das Element auch andere Klassen hat.

Die Lösung: element.classList.contains()

Die moderne Lösung besteht darin, die Methode element.classList.contains() zu verwenden, die „true“ zurückgibt, wenn das Element die angegebene Klasse enthält.

element.classList.contains(className);

Diese Methode funktioniert in allen gängigen Browsern und verfügt über Polyfills für ältere Browser.

Alternative: indexOf() mit Modifikation

Aus Gründen der Kompatibilität mit älteren Browsern kann die Methode indexOf() verwendet werden, diese ist jedoch nicht verfügbar erfordert eine leichte Änderung, um Fehlalarme zu vermeiden:

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

Angewandt auf das Beispiel

Mit der Methode classList.contains() kann der bereitgestellte Code vereinfacht werden :

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

test.innerHTML = "";

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

Dieser Ansatz eliminiert Redundanz und bietet eine robustere Prüfung der Klassenpräsenz.

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