Dieses Handbuch erklärt das Verfahren zum Hinzufügen einer aktiven Klasse in JavaScript.
Wie füge ich eine aktive Klasse in JavaScript hinzu?
Um eine aktive Klasse hinzuzufügen, verwenden wir die folgenden Methoden:
Kommen wir zur ersten Methode!
Methode 1: Verwenden Sie die Methode document.getElementById() mit der Methode classList.add(), um eine aktive Klasse in JavaScript hinzuzufügen
In JavaScript ist das „ document.getElementById() ”-Methode wird verwendet, um auf ein bestimmtes Element über seine ID zuzugreifen. Es wählt jedoch nur die Elemente basierend auf ihren IDs aus, nicht auf Klassen. Sie können es mit dem „ classList.add() ”-Methode zum Hinzufügen einer aktiven Klasse in JavaScript.
Lassen Sie uns diese Methode anhand eines Beispiels untersuchen.
Beispiel
In unserer HTML-Datei nehmen wir das „ ”-Tag mit etwas Text, geben Sie seine ID als “ txt “ und fügen Sie ein „ anklicken ” Ereignis, das das „ aktivieren Sie() ” Funktion. Beachten Sie, dass Sie das
-Tag innerhalb des
-Tags hinzufügen: < p-ID = 'txt' anklicken = 'aktivieren Sie()' > Hier drücken p >Definieren Sie in der JavaScript-Datei die Funktion activate() so, dass sie zunächst mit ihrer ID in der Methode document.getElementbyId() auf das Absatzelement zugreift. Fügen Sie dann zu Styling-Zwecken eine CSS-Klasse zu ihrer Klassenliste hinzu:
Funktion aktivieren ( ) {
da ist ein = dokumentieren. getElementById ( 'txt' ) ;
a. Klassenliste . hinzufügen ( 'neue Klasse' ) ;
}
Setzen Sie in der CSS-Datei einen Punkt vor „ neue Klasse “ und weisen Sie dem „ Hintergrundfarbe „Eigenschaft ein Wert“ Orange “:
. neue Klasse {Hintergrund - Farbe : Orange ;
}
Wenn Sie also auf das Absatzelement klicken, wird die hinzugefügte Hintergrundeigenschaft darauf angewendet:
Schauen wir uns die folgende Methode an, in der wir document.querySelector() verwenden, um eine aktive Klasse hinzuzufügen.
Methode 2: Verwenden Sie die Methode document.querySelector() mit der Methode classList.add(), um eine aktive Klasse in JavaScript hinzuzufügen
In JavaScript ist das „ document.querySelector() ”-Methode wird verwendet, um das erste Element aus dem Code zu erhalten. Sie können sowohl Klassen als auch IDs innerhalb der Methode querySelector() angeben. Es kann mit dem „ classList.add() ”-Methode zum Hinzufügen einer aktiven Klasse in JavaScript.
Beispiel
Wir verwenden jetzt nur noch das „ document.querySelector() „mit Kennung“ #txt “, um das Absatzelement auszuwählen. Auch hier wird die Methode classList.add() verwendet, um das aktive „ neue Klasse “:
Funktion aktivieren ( ) {da ist ein = dokumentieren. querySelector ( '#txt' ) ;
a. Klassenliste . hinzufügen ( 'neue Klasse' ) ;
}
Ausgabe
Wir haben zwei einfachste Methoden kennengelernt, um eine aktive Klasse in JavaScript hinzuzufügen
Fazit
Um eine aktive Klasse hinzuzufügen, können wir die „ getElementById() ' oder ' querySelector() “ mit der Methode classList.add(). Beide erwähnten Methoden erhalten Elemente zuerst anhand ihrer ID und verwenden dann die Methode classList.add(), den neuen Klassennamen, der dem Element zugewiesen wird, das für Stylingzwecke verwendet werden kann. Dieser Beitrag hat das Verfahren zum Hinzufügen einer aktiven Klasse in JavaScript beschrieben.