So entfernen Sie einen Klassennamen aus einem Element über JavaScript

Da wir uns der Tatsache bewusst sind, dass JavaScript häufig verwendet wird, um die Elemente einer HTML -Seite mit Hilfe der DOM -Knoten -Schnittstelle zu manipulieren. Diese Manipulationen können nicht nur den Stil oder die Daten in den HTML -Elementen ändern, sondern auch die Attribute der Elemente wie den Klassennamen ändern. Das Ändern oder Entfernen eines Klassennamens aus einem Element ist eine entscheidende Aufgabe, insbesondere wenn Sie mit Styling -Animation auf Elementen arbeiten.

Um eine Animation von einem Element in ein anderes Element zu verlagern, schreiben Sie nicht das gesamte Animationsskript der anderen Elemente um, da dies die Last auf dem Server erhöhen kann, sondern dass Sie Animationsskript auf Klassennamen oder IDs schreiben, und um sich einfach zu ändern oder sich einfach zu ändern oder zu ändern oder zu ändern oder zu ändern oder zu ändern oder zu ändern oder zu ändern oder zu ändern. Entfernen Sie den Klassennamen oder die ID eines HTML -Elements der Webseite.

Um den Klassennamen aus einem Element zu entfernen, verwenden wir das .Klasse.entfernen() Funktion.

Die Syntax ist:

Element.Klasse.entfernen (Klassenname)

Wir werden erfahren, wie wir JavaScript verwenden können, um einen Klassennamen aus einem Element auf der Webseite zu entfernen. Dafür werden wir erstellen:

• Eine grundlegende HTML -Seite mit einem Element mit einem Klassennamen, den wir entfernen möchten.
• Eine Taste, die die Funktion aufruft.
• Die mit der Schaltfläche verknüpfte Funktion entfernen den Klassennamen tatsächlich.
• Die Entwicklerwerkzeuge des Browsers, um die Entfernung des Klassennamens zu überprüfen.

Lass uns anfangen.

Einrichten der HTML -Seite

Wir werden eine erstellen Element mit einer Liste verschiedener Klassennamen. Das verfügt auch über eine bestimmte ID, um einen Verweis darauf zu erstellen Wenn wir JavaScript verwenden. Wir können dies erstellen, indem wir die folgenden Zeilen verwenden:

Dies ist ein DIV mit mehreren Klassen

Wir haben eine DIV mit den Klassen "Google Yahoo Bing LinuxHint" und die ID "LH-Tuts" ist. Wir haben die Style -Immobilie hinzugefügt, um sie sichtbar zu machen. Wir führen die HTML -Datei aus, um die folgende Ausgabe zu erhalten:

Jetzt, da wir eine grundlegende HTML -Seite haben, erstellen wir eine Schaltfläche, die eine Klasse aus dem entfernen wird Element.

Wir tun dies, indem wir die folgenden Codezeilen verwenden:

Klasse entfernen

Unsere Webseite wird so aussehen:

Erstellen des JavaScript -Codes, um die Klasse aus dem Element zu entfernen

Jetzt müssen wir eine Funktion „removeclass ()“ im Skript schreiben. Erstellen wir also ein Tag und schreiben eine Funktion, die die Klasse „Google“ aus der Liste der Klassen mit den folgenden Zeilen entfernen:

Diese Funktion sollte die Klasse „Google“ aus der Liste der Klassen der Klassen entfernen Element. Probieren wir es aus und überprüfen Sie die Ausgabe mit den Entwicklerwerkzeugen des Browsers.

Wie Sie sehen können, hat der DIV zunächst 4 verschiedene Klassen. Sobald wir die Taste drücken, wird der Name „Google“ -Klass aus der Liste der Klassennamen entfernt.

Wir können sogar mehrere Klassen gleichzeitig entfernen, da wir die Zeile verwenden:

div.Klasse.entfernen ("Google", "Yahoo", "Bing");

Der Funktionsnippet würde werden:

Wenn wir nun die Ausgabe mit den Entwickler -Tools des Browsers untersuchen, erhalten wir:

Wie Sie sehen können, konnten wir auch mehrere Klassen gleichzeitig entfernen.

Alternativer Ansatz

Es gibt noch eine Sache, wir benutzten die dokumentieren.GetElementById () Um einen Verweis auf das Element zu erstellen, können wir sogar die verwenden dokumentieren.GetElementByClassName (), Aber dafür müssen wir unser Skript ändern. Da wir uns nicht auf ein Element beziehen können, das seinen Klassennamen verwendet. Das liegt daran, dass der Klassenname ein "ist"Live Nodelist”.

Benutzen dokumentieren.GetElements byclassName () Unsere Funktion wird:

Funktion removeclass ()
div = document.GetElementsByClassName ("Google Yahoo Bing LinuxHint");
while (div.Länge)
div [0].Klasse.entfernen ("yahoo", "Bing");

Da es sich um eine Live -Nodelistin handelt, nehmen wir das erste Element in der Liste und entfernen seinen Klassennamen. Wir wiederholen dies weiter, bis der Nodelist leer ist.

Die Ausgabe ist als:

Das ist es, einen Klassennamen mit JavaScript aus einem Element zu entfernen.

Abschluss

JavaScript kann verwendet werden, um einen Klassennamen aus einem HTML -Element auf einer Webseite mithilfe des .Klasse.entfernen(). Es kann sogar verwendet werden, um mehrere Klassen aus der Klassenliste eines Elements zu entfernen. Um dies zu demonstrieren, haben wir ein grundlegendes HTML mit a erstellt div Element darauf. Danach haben wir ein Skript codiert, um die Klasse aus diesem Element zu entfernen. Wir haben die Ausgabe mithilfe der Entwicklertools des Browsers untersucht und sogar eine alternative Möglichkeit ausprobiert, dieselbe Aufgabe zu erledigen.