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

Durch die Verwendung von Klassen in HTML können Elemente zusammengefasst werden und das gleiche Styling oder die gleiche Funktionalität haben. Infolgedessen ist das Ändern des Verhaltens aller an einer Klasse beteiligten Elemente so einfach wie das Schreiben oder Ändern einer einzelnen Codezeile. In einigen Fällen müssen Benutzer möglicherweise überprüfen, ob eine bestimmte Klasse Teil eines Elements ist oder nicht.

In diesem Tutorial wird veranschaulicht, wie Sie überprüfen, ob das Element eine Klasse in JavaScript enthält.

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

Um zu überprüfen, ob ein Element eine Klasse enthält, verwenden Sie die folgenden Methoden:

• enthält () Methode
• Matches () Methode

Lassen Sie uns die Arbeit dieser Methoden einzeln verstehen.

Methode 1: Überprüfen Sie, ob ein Element eine Klasse enthält, die contains () Methode enthält

Der "enthält ()"Methode der"KlasseObjekt kann verwendet werden, um zu überprüfen, ob ein Element einen bestimmten Klassennamen hat. Es ist eine der beliebtesten Methoden zur Bestimmung der Klasse eines Elements.

Syntax
Befolgen Sie die angegebene Syntax für die Methode contains ():

Element.Klasse.enthält ('Klassenname')

Hier,

• “ElementIst ein HTML -Element, das überprüft wird, ob es diese bestimmte Klasse enthält.
• Der "KlassennameIdentifizieren Sie den Namen der CSS -Klasse, von der das Element Teil ist

Rückgabewert
Wenn das Element den Klassennamen hat, gibt es zurück “WAHR", Sonst gibt es zurück"FALSCH”.

Beispiel
Erstellen Sie eine Schaltfläche mit Klassen “Knopfgröße" Und "Buttonstyle”Zum Styling des Knopfes. Anbringen "ONCLICKEreignis mit der Schaltfläche, die die Funktion auslöst, um zu überprüfen, ob die angegebene Klasse Teil des Taste -Elements ist oder nicht:

Taste

Vor dem JavaScript -Code sieht die Ausgabe so aus:

Schreiben Sie in einer JavaScript -Datei einfach diese Codezeilen:

Funktion classcheck ()
const elementClass = document.QuerySelector ('Taste');
if (ElementClass.Klasse.enthält ('buttonStyle'))
Alarm ("Ja! Die Schaltfläche enthält diese "ButtonStyle" -Klasse ");

Im obigen Code:

• Eine Funktion definieren “classcheck ()”Das wird auf dem Schaltflächenklick ausgelöst.
• Abrufen Sie dann die Taste mit der "ab"QuerySelector ()"Methode und speichern Sie es in einer Variablen"Elementclass”.
• Ruf den "enthält ()Methode, indem Sie einen bestimmten Klassennamen wie "übergeben"ButtonstyleDie prüft, ob es Teil der Taste ist oder nicht.
• Wenn es zurückkehrt “WAHR”, Eine Warnmeldung wird angezeigt:

Ausgang

Die obige Ausgabe zeigt an, dass beim Klicken der Schaltfläche angezeigt wird, dass es eine “hat“Buttonstyle" Klasse.

Methode 2: Überprüfen Sie, ob ein Element eine Klasse mit der Methode () -Methode enthält

Es gibt eine andere Methode, “Streichhölzer()Das bestimmt, ob das Element eine bestimmte Klasse hat oder nicht. Es dauert einen einzelnen Parameter, den Klassennamen, um zu überprüfen, ob das Element diese Klasse enthält oder nicht.

Syntax
Die folgende Syntax wird für die Methode () -Methode verwendet:

Element.Streichhölzer('.Klassenname')

In der obigen Syntax,

• Der "ElementIst ein HTML -Element, das überprüft wird, ob es diese bestimmte Klasse enthält oder nicht.
• Der "Klassenname”Zeigt den Namen der CSS -Klasse an, dass das Element Teil ist. Der Name der Klasse wird mit einem Punkt an die matchers () -Methode übergeben ().) das identifiziert “Klasse”.

Rückgabewert
Es kehrt auch zurück “WAHR"Wenn das oder Element sonst eine Klasse hat"FALSCH" ist zurück gekommen.

Beispiel
Verwenden Sie in einer JavaScript -Datei die angegebenen Codezeilen, um zu überprüfen, ob das Element die spezifische Klasse hat oder nicht, indem Sie die Methode der Übereinstimmungen () aufrufen:

Funktion classcheck ()
const elementClass = document.QuerySelector ('Taste');
if (ElementClass.Streichhölzer('.ButtonStyle '))
Alarm ("Ja! Die Schaltfläche enthält diese "ButtonStyle" -Klasse ");

Im obigen Code -Snippet:

• Definieren Sie zuerst eine Funktion “classcheck ()”Das wird auf dem Schaltflächenklick ausgelöst.
• Abrufen Sie dann die Taste mit der "ab"QuerySelector ()"Methode und speichern Sie es in einer Variablen"Elementclass”.
• Ruf den "Streichhölzer()"Methode, indem Sie einen bestimmten Klassennamen wie hier übergeben"Buttonstyle”Mit einem Punkt (.) Vor ihm, was darauf hinweist, dass es sich um die Klasse handelt und prüft, ob sie Teil der Taste ist oder nicht.
• Wenn die Methode (Matches () -Methode zurückgibt “WAHR", Eine Warnmeldung"Ja! Die Schaltfläche enthält diese "Buttonstyle" -Klasse" wird Angezeigt werden:

Ausgang

Abschluss

Um zu überprüfen, ob ein Element eine Klasse enthält, verwenden Sie das JavaScript “enthält ()”Methode oder die“Streichhölzer()" Methode. Die Methode enthält () ist die am häufigsten verwendete Methode, um die Klasse des Elements zu bestimmen. Beide Methoden kehren zurück “WAHR"Wenn das Element sonst eine Klasse hat"FALSCH" ist zurück gekommen. In diesem Tutorial wurde gezeigt.