So umschalten der Klasse mit reinem JavaScript in HTML?

Das Umschalten einer Klasse mit reinem JavaScript in HTML ist nützlich, wenn Sie das Erscheinungsbild eines Elements basierend auf einer bestimmten Bedingung wie der Benutzerinteraktion ändern möchten. Ändern Sie beispielsweise die Hintergrundfarbe der Seite oder der Schaltfläche der Seite im Klickereignis. Um eine Klasse umzuschalten, können Änderungen dynamisch vorgenommen werden, ohne die Seite aktualisieren zu müssen. Dies kann dazu beitragen, die Benutzererfahrung zu erhöhen, indem die Änderungen reibungsloser und reaktionsschneller werden.

Dieser Beitrag veranschaulicht die Prozedur, die Klasse mit JavaScript umzuschalten.

So umschalten die CSS -Klasse mit reinem JavaScript in HTML?

Verwenden Sie für den Umschalten von Klassen mit reinem JavaScript die “Umschalten()"Methode der"Klasse”Attribut/Eigenschaft. Die Methode Toggle () akzeptiert einen Klassennamen als Parameter. Umschalten einer Klasse bedeutet, das Vorhandensein einer Klasse in einem Element in HTML zu wechseln. Es geht darum zu überprüfen, ob eine Klasse in einem Element vorhanden ist, und wenn dies der Fall ist. Wenn die Klasse dem Element nicht zugeordnet ist, wird sie hinzugefügt, sie wird hinzugefügt.

Beispiel 1: Ändern Sie die Farbe des Elements durch Umschalten der Klasse mit reinem JavaScript in HTML
Im folgenden Beispiel ändern wir die Hintergrundfarbe der Schaltfläche auf der Schaltfläche Klicken Sie durch Umschalten der Klasse.

Erstellen Sie zunächst eine Schaltfläche und weisen Sie eine ID zu “Btn”Um den Knopf zu stylen. Anbringen "ONCLICK"Ereignis darauf, das das aufrufen wird"classtoggle ()”Funktion auf der Schaltfläche Klicken Sie auf:

Taste

Erstellen Sie in der CSS -Datei eine ID “Btn”Zum Styling der Button:

#BTN
Polsterung: 3px;
Rand: 2px;
Schriftfamilie: Sans-Serif;
Grenzradius: .5rem;

Erstellen Sie eine Klasse namens “GelbUm die Hintergrundfarbe des Elements festzulegen:

.Gelb
Hintergrundfarbe: Gelb;

In der JavaScript -Datei eine Funktion definieren “classtoggle ()"Das nennt das"Umschalten()"Methode der"KlasseEigenschaft für den Umschaltungsunterricht:

Funktion classtoggle ()
dokumentieren.GetElementById ("Btn").Klasse.toggle ("gelb");

Wie Sie im Ausgang beim Klicken auf die Schaltfläche sehen können, ändert sich die Hintergrundfarbe. Dies zeigt an, dass das “GelbDie Klasse wurde der Taste erfolgreich mit der "zugewiesen"Umschalten()"Methode der"Klasse" Eigentum:

Beispiel 2: Ändern Sie die Schrift des Elements durch Umschalten der Klasse mit reinem JavaScript in HTML
Im angegebenen Beispiel werden wir die CSS -Klasse zum Ändern des Textes auf dem Klickereignis der Schaltfläche umschalten.

Erstellen Sie in einer HTML -Datei a

Tag, um einen Text und eine Schaltfläche anzuzeigen. Eine ID zuweisen “Willkommen”In den Text, der dazu beiträgt, den Text zu erhalten und eine Klasse mit der Umschaltmethode zuzuweisen:

Willkommen bei LinuxHint

Klicken

Erstellen Sie eine CSS -Klasse “TextDas ändert die Farbe und die Schriftgröße des Textes:

.Text
Schriftgröße: 30px;
Farbe: #06b5f5;

Eine Funktion definieren “classtoggle ()"Um die Klasse zuzuweisen"Text" zum

Tagelement auf der Schaltfläche Klicken, die mithilfe der zugewiesenen ID mit der zugewiesenen ID abgerufen werdenGetElementById ()" Methode.

Funktion classtoggle ()
dokumentieren.GetElementById ("Willkommen").Klasse.Toggle ("Text");

Es ist zu sehen, dass das “TextDie Klasse wird dem angegebenen Text zugewiesen, indem Sie auf die Schaltfläche klicken:

Wir haben alle wesentlichen Anweisungen zur Verfügung gestellt, um die Klasse mit reinem JavaScript in HTML umzuschalten.

Abschluss

Um die Klasse mit reinem JavaScript in HTML umzuschalten, verwenden Sie die “Umschalten()"Methode der"Klasse" Eigentum. Es hilft, dem Element eine Klasse zuzuweisen, wenn es ihm zugewiesen ist. In diesem Beitrag wurde die Prozedur für das Umschalten von Klassen mit JavaScript dargestellt.