So fügen Sie eine aktive Klasse in JavaScript hinzu

Während der Entwicklung einer Website wird Ihr Code manchmal so langwierig und komplex, dass Sie keine CSS -IDs oder Klassen einzeln hinzufügen oder entfernen können. Um solche Situationen anzugehen, können Sie JavaScript verwenden, um aktive Klassen zum Styling hinzuzufügen oder andere Zwecke zu erfüllen. JavaScript bietet verschiedene Methoden, um das angegebene komplexe Problem sofort zu beheben.

In diesem Handbuch wird das Verfahren des Hinzufügens einer aktiven Klasse in JavaScript erläutert.

So fügen Sie eine aktive Klasse in JavaScript hinzu?

Um eine aktive Klasse hinzuzufügen, verwenden wir die folgenden Methoden:

• dokumentieren.GetElementById ()
• dokumentieren.QuerySelector ()

Gehen wir zur ersten Methode!

Methode 1: Verwenden Sie das Dokument.GetElementById () mit Classlist.add () Methode zum Hinzufügen einer aktiven Klasse in JavaScript hinzufügen

In JavaScript die “dokumentieren.GetElementById ()Die Methode wird verwendet, um durch seine ID auf ein bestimmtes Element zugreifen zu können. Es wird jedoch nur die Elemente basierend auf ihren IDs ausgewählt, nicht auf Klassen. Sie können es mit dem verwenden “Klasse.hinzufügen()Methode zum Hinzufügen einer aktiven Klasse in JavaScript.

Lassen Sie uns diese Methode untersuchen, indem Sie ein Beispiel nehmen.

Beispiel

In unserer HTML -Datei werden wir die “nehmen“

”Tag mit einem Text, geben Sie seine ID als“ antxt", Und fügen Sie eine" hinzu "ONCLICKEreignis, das die "auslösen"aktivieren Sie()”Funktion. Beachten Sie das, fügen Sie die hinzu

Tag im Tag: Tag:

Hier drücken

Definieren Sie in der JavaScript -Datei die Funktion active () so, dass sie zunächst auf das Absatzelement mit seiner ID im Dokument zugreift.GetElementById () -Methode. Fügen Sie dann eine CSS -Klasse zu seiner Klassenliste zu Stylingzwecken hinzu:

Funktion active ()
var a = dokument.GetElementById ("txt");
A.Klasse.add ("NewClass");

Platzieren Sie in der CSS -Datei einen Punkt vor “NEWCLASS”Und zuweisen die“Hintergrundfarbe”Eigenschaft ein Wert“orange”:

.NewClass
Hintergrundfarbe: Orange;

Wenn Sie auf das Absatzelement klicken, wird die hinzugefügte Hintergrundeigenschaft darauf angewendet:

Schauen wir uns die folgende Methode an, mit der wir das Dokument verwenden werden.QuerySelector (), um eine aktive Klasse hinzuzufügen.

Methode 2: Dokument verwenden.QuerySelector () mit Classlist.add () Methode zum Hinzufügen einer aktiven Klasse in JavaScript hinzufügen

In JavaScript die “dokumentieren.QuerySelector ()Die Methode wird verwendet, um das erste Element aus dem Code zu erhalten. Sie können Klassen und IDs sowohl innerhalb der QuerySelector () -Methode angeben. Es kann mit dem verwendet werdenKlasse.hinzufügen()Methode zum Hinzufügen einer aktiven Klasse in JavaScript.

Beispiel

Wir werden jetzt nur das verwenden “dokumentieren.QuerySelector ()”Mit ID“#txt”Um das Absatzelement auszuwählen. Wieder die Klassenliste.add () Methode wird verwendet, um das aktive hinzuzufügen “NEWCLASS”:

Funktion active ()
var a = dokument.querySelector ("#txt");
A.Klasse.add ("NewClass");

Ausgang

Wir haben zwei einfachste Methoden gelernt, um eine aktive Klasse in JavaScript hinzuzufügen

Abschluss

Um eine aktive Klasse hinzuzufügen, können wir das verwenden “GetElementById ()" oder "QuerySelector ()”Mit der Klassenliste.add () Methode. Beide erwähnten Methoden erhalten zuerst Elemente nach ihrer ID und verwenden dann die Classlist.add () Methode, der neue Klassenname, der dem Element zugeordnet ist, das für Stylingzwecke verwendet werden kann. In diesem Beitrag wurde das Verfahren beschrieben, das sich auf das Hinzufügen einer aktiven Klasse in JavaScript bezieht.