Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie entferne ich CSS-Klassen mit JavaScript ohne jQuery?

Mary-Kate Olsen
Freigeben: 2024-11-11 17:33:03
Original
655 Leute haben es durchsucht

How to Remove CSS Classes with JavaScript Without jQuery?

CSS-Klassen mit JavaScript ohne jQuery entfernen

Das Entfernen einer CSS-Klasse aus einem Element mithilfe von JavaScript ist eine häufige Aufgabe in der Webentwicklung. Um dies ohne jQuery zu erreichen, gibt es mehrere Ansätze, wobei der einfachste die Verwendung der classList-Eigenschaft ist.

Verwendung von classList

Die classList-Eigenschaft bietet eine einfache Schnittstelle zum Bearbeiten von Klassen für ein Element. Um eine bestimmte Klasse zu entfernen, verwenden Sie einfach die Methode „remove()“:

ELEMENT.classList.remove("CLASS_NAME");
Nach dem Login kopieren

Beispiel

Berücksichtigen Sie das folgende HTML und CSS:

<div>
Nach dem Login kopieren
.red {
  background: red;
}
Nach dem Login kopieren

Um die Klasse „red“ mithilfe von classList aus dem Element „el“ zu entfernen, kann der folgende Code verwendet werden verwendet:

var el = document.getElementById("el");
el.classList.remove("red");
Nach dem Login kopieren

Alternative Ansätze

Während classList der am meisten empfohlene Ansatz ist, gibt es alternative Möglichkeiten zum Entfernen von Klassen, wie zum Beispiel:

  • Attributmanipulation: Festlegen des Attributs „className“ auf die neue Klassenliste ohne das Ziel Klasse.
  • Ersetzung regulärer Ausdrücke:Verwenden von replace(), um die Zielklasse aus der KlassenName-Zeichenfolge zu entfernen.

Diese Methoden sind jedoch weniger effizient und flexibel im Vergleich zur Verwendung von classList.

Das obige ist der detaillierte Inhalt vonWie entferne ich CSS-Klassen mit JavaScript ohne jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage