Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie entferne ich eine CSS-Klasse aus einem Element mithilfe von JavaScript (ohne jQuery)?

Mary-Kate Olsen
Freigeben: 2024-11-08 20:30:02
Original
893 Leute haben es durchsucht

How to Remove a CSS Class from an Element Using JavaScript (Without jQuery)?

So entfernen Sie eine CSS-Klasse aus einem Element mithilfe von JavaScript (ohne jQuery)

Frage: Kann mir jemand weiterhelfen So entfernen Sie eine Klasse aus einem HTML-Element rein mit JavaScript, ausgenommen jQuery?

Antwort:

Der bevorzugte Ansatz ist die Verwendung der classList-Eigenschaft. Es wird von allen modernen Browsern weitgehend unterstützt.

Um eine Klasse zu entfernen, verwenden Sie einfach die folgende Syntax:

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

Beispiel:

Betrachten Sie a button-Element mit einer Klasse namens „red“, um dieses Konzept zu demonstrieren:

<button>
Nach dem Login kopieren

Wenn auf die Schaltfläche geklickt wird, wird das folgende JavaScript angezeigt Code entfernt die Klasse „rot“ aus einem Element mit der ID „el“:

remove.onclick = () => {
  const el = document.querySelector('#el');
  el.classList.remove("red");
};
Nach dem Login kopieren

Diese Aktion ändert die auf das Element mit der ID „el“ angewendeten CSS-Stile und entfernt so effektiv den rötlichen Hintergrund:

.red {
  background: red
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie entferne ich eine CSS-Klasse aus einem Element mithilfe von 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