Wie kann man zuverlässig überprüfen, ob ein HTML-Element eine bestimmte Klasse in JavaScript enthält?

Gibt es eine Methode, um zu überprüfen, ob ein HTML-Element eine bestimmte Klasse in JavaScript enthält?

Problem:

JavaScript-Anfänger verlassen sich häufig auf den Vergleich der className-Eigenschaft, um festzustellen, ob ein Element eine bestimmte Klasse enthält. Dieser Ansatz schlägt jedoch fehl, wenn das Element mehrere Klassen hat und die gewünschte Klasse nicht die einzige ist.

Lösung:

Um dieses Problem zu beheben, stellt JavaScript Folgendes bereit: classList-Eigenschaft und die Includes-Methode. Die Eigenschaft „classList“ gibt eine Liste der auf das Element angewendeten Klassen zurück und die Methode „contains“ prüft, ob eine bestimmte Klasse in dieser Liste enthalten ist.

const element = document.getElementById("test");
const hasClass1 = element.classList.contains("class1");

Dieser Ansatz funktioniert unabhängig von der Anzahl der vorhandenen Klassen zuverlässig Element.

Alternative Ansätze:

Wenn classList im Zielbrowser nicht unterstützt wird, wird eine alternative Methode verwendet Die Funktion indexOf kann verwendet werden:

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

Implementierung:

Um diesen Ansatz auf das in der Frage bereitgestellte Beispiel anzuwenden, ersetzen Sie die ursprüngliche switch-Anweisung durch die folgende Code:

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

element.textContent = "";

for (let i = 0; i < classes.length; i++) {
  if (element.classList.contains(classes[i])) {
    element.textContent = `I have ${classes[i]}`;
    break;
  }
}

Dieser Code durchläuft die erwarteten Klassen und zeigt die erste an, die auf dem Element vorhanden ist.

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