Wie überprüfe ich mithilfe von JavaScript das Vorhandensein einer Klasse in einem HTML-Element?

Vorhandensein von Elementklassen mit JavaScript prüfen

In JavaScript lässt sich mit modernen Browsern leicht feststellen, ob ein HTML-Element eine bestimmte Klasse besitzt. inhärentes classList-Objekt. Mit der Methode classList .contains() können Sie das Vorhandensein einer Klasse auf einem Element überprüfen. Seine Syntax lautet wie folgt:

element.classList.contains(class);

Dieser Ansatz wird von allen aktuellen Browsern unterstützt und Polyfills sind für ältere Browser verfügbar.

Alternativer Ansatz für ältere Browser

Wenn die Kompatibilität mit älteren Browsern entscheidend ist und Sie Polyfills lieber vermeiden möchten, ist eine alternative Methode die Verwendung von indexOf() verfügbar:

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

Dieser optimierte Ansatz stellt sicher, dass nur exakte Klassenübereinstimmungen erkannt werden, wodurch Fehlalarme aus teilweisen Klassenübereinstimmungen verhindert werden.

Anwenden der Lösungen auf das bereitgestellte Beispiel

Im bereitgestellten Beispiel kann die switch-Anweisung nicht mit den Methoden classList und indexOf verwendet werden. Sie können jedoch das gleiche Ergebnis mit dem folgenden 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;
    }
}

Dieser überarbeitete Code ist prägnanter und eliminiert redundante Prüfungen, während er gleichzeitig die Klassenpräsenz im HTML-Element genau identifiziert.

Das obige ist der detaillierte Inhalt vonWie überprüfe ich mithilfe von JavaScript das Vorhandensein einer Klasse in einem HTML-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!