Heim > Web-Frontend > js-Tutorial > Wie entferne ich CSS-Klassen mit JavaScript?

Wie entferne ich CSS-Klassen mit JavaScript?

Susan Sarandon
Freigeben: 2024-11-08 20:10:17
Original
596 Leute haben es durchsucht

How to Remove CSS Classes with JavaScript?

CSS-Klassen mit JavaScript entfernen

Um eine CSS-Klasse mit JavaScript aus einem Element zu entfernen, gibt es mehrere Ansätze. Sehen wir uns die empfohlene Methode mithilfe von classList an.

classList ist eine weithin unterstützte Eigenschaft in modernen Browsern. Um es zu verwenden, befolgen Sie diese Schritte:

  1. Rufen Sie das Element ab: Verwenden Sie document.querySelector(), um das Element auszuwählen, das Sie ändern möchten.
  2. Greifen Sie auf die Eigenschaft „classList“ zu: Sobald Sie das Element haben, verwenden Sie die Eigenschaft „classList“, um es zu bearbeiten Klassen.
  3. Entfernen Sie die Klasse: Rufen Sie die Methode „remove()“ für die Klassenliste auf und geben Sie den Namen der Klasse, die Sie entfernen möchten, in Anführungszeichen an.

Für Beispiel:

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

Dieser Code entfernt die „rote“ Klasse aus dem Element mit der ID „el“.

Zusätzliche Hinweise:

  • Wenn Sie mehrere Klassen entfernen müssen, können Sie die Methode „remove()“ mehrmals verwenden.
  • classList unterstützt auch die Methoden add(), toggle() und contains() zum Verwalten von Klassen.
  • Für Browser, die classList nicht unterstützen, Sie können element.className verwenden, um die Klasse zu entfernen, sie gilt jedoch als veraltet.

Das obige ist der detaillierte Inhalt vonWie entferne ich CSS-Klassen mit JavaScript?. 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