Überprüfen Sie, ob eine bestimmte Klasse mit JavaScript auf der Seite vorhanden ist

Während der Entwicklung der Website machen sich Programmierer manchmal Sorgen darüber, warum das gewünschte Ergebnis nicht auf der Seite angezeigt wird. Daher müssen sie überprüfen, ob die bestimmte Klasse zur bestimmten Seite oder zum Element hinzugefügt wird oder nicht. Dazu bietet JavaScript einige Methoden zur Klassenüberprüfung eines Elements oder einer Seite, wie z.

In diesem Blog werden die Methoden definiert, um festzustellen, ob die spezifische Klasse auf der Seite mit JavaScript vorhanden ist.

So überprüfen Sie, ob eine bestimmte Klasse mit JavaScript auf der Seite vorhanden ist?

Um zu überprüfen, ob die bestimmte Klasse existiert, verwenden Sie die folgenden JavaScript -Methoden:

• dokumentieren.GetElements byclassName () mit Länge Eigenschaft.
• enthält () Methode

Methode 1: Überprüfen Sie, ob auf der Seite eine bestimmte/bestimmte Klasse mit dem Dokument vorhanden ist.GetElements byclassName () mit Länge Eigenschaft

Verwenden Sie die “GetElements byclassName ()Methode mit der “LängeEigenschaft, um festzustellen, ob die bestimmte Klasse auf der Seite vorhanden ist oder nicht. Die Methode GetElementsByClassName () wird zur Auswahl der Elemente mit dem Klassennamen verwendet, und dann wird überprüft, ob das Längenattribut der Sammlung größer als 0 ist. Wenn es ausgibt “Ja”, Die Klasse ist auf der Seite vorhanden.

Syntax

Befolgen Sie die angegebene Syntax für die Verwendung der GetElementsByClassName () -Methode mit der Länge Eigenschaft:

dokumentieren.GetElementsByClassName ('ClassName').Länge

Übergeben Sie den Klassennamen als Parameter, der überprüft werden muss.

Beispiel

Entwerfen Sie in einer HTML -Datei zuerst die Seite. Hier fügen wir ein Bild als Logo auf dem Header hinzu, indem wir ein DIV -Element und ein Tag verwenden:

src = "https: // linuxHint.COM/WP-Content/Uploads/2019/11/Logo-Finale.png " />

Stellen Sie dann den Titel auf den Header ein:

Überprüfen Sie, ob eine bestimmte Klasse mit JavaScript auf der Seite vorhanden ist

Erstellen Sie danach eine Schaltfläche auf der Seite, auf der die “aufgerufen wirdcheckclassexists ()Funktion, die angibt, ob die spezifische Klasse auf der Seite vorhanden ist oder nicht:

klicken Sie hier!

Durch Ausführen des oben genannten HTML -Codes gibt es die folgende Seite im Browser:

Verwenden Sie nun in der JavaScript -Datei oder im Tag den folgenden Code:

Funktion checkclassexists ()
const classcheck = dokument.GetElements byClassName ('flex-item1').Länge> 0;
if (clasccheck)
alert ('✅ class "flex-item1" existiert auf Seite');
anders
ALERT ('⛔️ Klasse "Flex-iTem1" existiert nicht auf Seite');

Im obigen Code:

• Definieren Sie zuerst eine Funktion “checkclassexists ()Das löst die Schaltfläche Klicken aus.
• Erstellen Sie eine Variable, die das Ergebnis speichert, um die Klasse zu überprüfenflex-item1"Durch die Verwendung der"GetElements byclassName ()Methode und dann prüfen, ob die Sammlung der Sammlung "LängeDas Attribut ist größer als 0.
• Zeigen Sie nun eine Warnmeldung für die Existenz der Klasse an und existieren nicht auf der Seite.
• Wenn der resultierende Wert in der Variablen größer als 0 ist, zeigt er „Klasse“flex-item1 "existiert auf Seite”.
• Ansonsten wird eine Warnmeldung angezeigt “Klasse “flex-item1 "existiert nicht auf Seite”.

Ausgang

Um zu überprüfen, ob das angegebene Element die bestimmte Klasse in JavaScript enthält, überprüfen Sie den nächsten Abschnitt.

Methode 2: Überprüfen Sie, ob die spezifische Klasse auf der Seite mithilfe der containes () Methode vorhanden ist

Um festzustellen, ob eine bestimmte Klasse auf einer Webseite vorhanden ist, verwenden Sie die “enthält ()"Methode der"Klasse" Eigentum. Übergeben Sie den Klassennamen in der Methode containes (), und es gibt wahr, wenn der Klassenname im angegebenen Element ansonsten vorhanden ist, gibt es false zurück.

Syntax

Verwenden Sie die folgende Syntax für die Methode contains ():

Klasse.enthält ('className')

Beispiel

Wie wir wissen, befinden sich der gesamte Inhalt der Webseite im Tag, sodass wir zuerst das Körperelement mit seiner zugewiesenen ID abrufen:

klicken Sie hier!

Definieren Sie eine Funktion und holen Sie das Körperelement, indem Sie die zugewiesene ID übergeben “pg" im "GetElementById ()Methode, dann die “nenntenthält ()Methode durch Übergabe der Klasse "Divstyle”Um zu überprüfen, ob diese Klasse im gesamten Tag existiert oder nicht:

Funktion checkclassexists ()
const classcheck = dokument.GetElementById ('PG');
if (klassisch.Klasse.enthält ('divstyle'))
Alert ('✅ Klasse "DivStyle" existiert auf Seite');
anders
Alert ('⛔️ Klasse "Divstyle" existiert nicht auf Seite');

Die Ausgabe zeigt, dass die “KörperElement/Tag enthält nicht die “Divstyle" Klasse:

Wir haben die wesentlichen Informationen zur Überprüfung einer bestimmten Klasse auf der Seite mit JavaScript zusammengestellt.

Abschluss

Um festzustellen, ob die bestimmte Klasse auf der Seite vorhanden ist, verwenden Sie die “dokumentieren.GetElements byclassName ()Methode mit der “Länge”Eigentum oder das“enthält ()" Methode. Die erste Methode ist die am häufigsten für diesen Zweck verwendete. Die Methode enthält () wird für ein bestimmtes Element verwendet. In diesem Blog haben wir die Methoden definiert, um festzustellen, ob die spezifische Klasse auf der Seite mit JavaScript vorhanden ist.