Auf CSS Klassen zugreifen

className

Über die Eigenschaft className bekommt man die zugewiesene Klasse eines Elements als String geliefert. Sind mehrere Klassen zugewiesen, werden die weiteren Klassen mit Komma getrennt aufgeführt.

classList

siehe auch Mediaevent

Ab Version 4 der DOM Api gibt es die classList. Diese enthält alle zugewiesenen Klassen eines Elements als Liste. Über mehrere Methoden kann man einfacher mit Klassen arbeiten, als es früher der Fall war.

classList.toggle()

classList.toggle("andereKlasse") bietet die Möglichkeit die Klasse zu wechseln. Das bedeutet, wenn die Klasse nicht zugewiesen ist, wird sie hinzugefügt. Wenn sie zugewiesen ist, wird sie gelöscht. So kann man eine Klasse hin und her schalten.
Siehe Beispiel.

classList.add()

Hier mit lässt sich eine Klasse hinzufügen. Erwartet wird der Klassenname.
siehe Beispiel

classList.remove()

Hiermit kann man eine Klasse entfernen. Erwartet wird der Klassenname.
siehe Beispiel

classList.contains()

Hiermit kann man überprüfen, ob die Klasse zugewiesen ist. Wenn es der Fall ist wird true geliefert. Erwartet wird der Klassenname.
siehe Beispiel

 


Javascript Tipps