JavaScript/DOM/Element/classList

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft Element.classList zeigt Klassenattribute eines Elements.

  • DOM 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
  • Nur Lesen / Read Only

Syntax

const elementClasses = elementNodeReference.classList;

Gegenüber Element.className bietet diese Eigenschaft die Möglichkeit, auch bei mehreren vorhandenen Klassen einzelne davon hinzuzufügen, zu verändern oder zu löschen. Um dies zu erreichen, können Sie mit der Punkt-Notation weitere Methoden anhängen:

  • DOM 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

  • add: fügt der Liste eine weitere Klasse hinzu
  • remove: entfernt eine Klasse aus der Liste
  • toggle: schaltet eine Klasse an bzw. ab
  • contains: überpüft, ob eine Liste aller Klassen eine bestimmte Klasse enthält.
  • item: findet eine bestimmte Klasse

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Liste aller Attributklassen anzeigen

Beispiel ansehen …
  function Auswerten() {
    var hinweis = document.getElementById('tipp');
	var text ='Folgende Klassen existieren: ' +hinweis.classList;
	document.getElementById("ausgabe").innerHTML = text;
  }

In diesem Beispiel werden alle vorhandenen Klassen des Absatzes in einem String ausgelesen.

Der praktische Nutzen dieses Beispiels ist begrenzt, eine Anwendungsmöglichkeit wäre der Test, ob das Element überhaupt eine Klasse hat, oder ob classList erkannt wird (wenn nicht wird document.body.classList == undefined zurückgegeben.


[Bearbeiten] Klassen hinzufügen mit add

Beispiel ansehen …
  function klasseHinzufügen() {
    var hinweis = document.getElementById('tipp');
	hinweis.classList.add('sicherheitshinweis');
  }
Beachten Sie: Es ist nicht möglich mehrere durch Leerzeichen getrennte Klassen hinzuzufügen. Dafür müssten die Klassen einzeln hinzugefügt werden.

[Bearbeiten] Klassen entfernen mit remove

Beispiel ansehen …
  function klasseEntfernen() {
    var hinweis = document.getElementById('tipp');
	hinweis.classList.remove('sicherheitshinweis');
  }


[Bearbeiten] Umschalten mit toggle

Beispiel: Beispiel 4: toggle
function Aufklappen(){
  elem.classList.toggle('aufklappen');
}

Wenn toggle aufgerufen wird, wird eine schon vorhandene Klasse entfernt. Wenn die Klasse noch nicht existiert, wird sie beim 1. Toggeln hinzugefügt, beim 2. Toggeln wieder entfernt.

Beispiel ansehen …
  var button1 = document.getElementById('button1'),
      button2 = document.getElementById('button2');
 
  button1.addEventListener('click',showHide);
  button2.addEventListener('click',showHide);
 
  function showHide(event){ 
    event.target.parentNode.classList.toggle('show');
    event.target.innerHTML ='weniger';   
  }

In unserem Beispiel gibt es zwei section-Elemente, deren Inhalt beim Klick auf die Buttons gezeigt wird.

Bei einem Klick auf den Button wird die Funktion showHide() aufgerufen, die mit event.target ermittelt, welcher Button geklickt wurde und dann mit parentNode dem Elternelement mit der Methode classList.toggle eine neue Klasse zuweist. Zeitgleich wird mit innerHTML der Text des Buttons geändert.

Bei einem weiteren Klick wird die Klasse erneut gewechselt. Der Übergang erfolgt nicht abrupt, sondern mit CSS transition.


[Bearbeiten] force: ein zweites Argument bei toggle

  • Chrome
  • Firefox
  • IE 1111
  • Opera
  • Safari

[Bearbeiten] Überprüfen mit contains

Mit classList.contains() können Sie überprüfen, ob eine Klasse in der Liste der Klassen des Objekts enthalten ist oder nicht. Rückgabewert ist entweder true oder false.


[Bearbeiten] Finden einer Klasse mit item

Mit der classList.item(i)-Methode können Sie eine bestimmte Klasse ansprechen.

Beispiel: Beispiel 5: item
for (var i = 0; i < elem.classList.length; i++) {
    var class = elem.classList.item(i);
}

Im Beispiel durchläuft das angesprochene Element eine Schleife, in der alle vorhandenen Klassen untersucht werden.

Beachten Sie: Da die Zahl n kein Array anspricht, sondern das Argument der Methode ist, benötigen Sie runde Klammern!

[Bearbeiten] Weblinks

[Bearbeiten] polyfill für IE8-9

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML