CSS, HTML und Javascript mit {stil}

Javascript classList

classlist add, remove und toggle: neu in Javascript 5

classList fügt einem Element CSS-Klassen mit add, remove, contains, toggle so einfach wie mit jQuery hinzu und entfernt sie ebenso einfach wieder.

classList wird von allen modernen Browser unterstützt – nur Internet Explorer kommt erst mit Version 10 dahinter (für die älteren Versionen von IE gibt es ein Polyfill).

document.querySelector('elem').classList.add('justonemore')

Vor HTML5 war das class-Attribut eine Qual für Javascript. Wir können zwar beliebig viele Klassen in einem class-Attribut unterbringen, aber der Zugriff auf class war mit der heißen Nadel gestrickt und ging immer davon aus, dass es nur einen Wert für das class-Attribut gibt.

Die DOM4-Spezifikation verliert gerade mal einen Satz zu classList. Ich habe das Gefühl, das W3C schämt sich, dass classList erst 10 Years After dabei ist.

classList

Wenn jQuery sowieso geladen wird, ist classList kein Thema, aber für triviale Manipulationen erspart classList das Einbinden von jQuery.

Wenn classList dennoch eingesetzt wird, hilft ein Polyfill: eligray classList.js.

  • classList.add()

    fügt der classList eine neue Klasse hinzu

  • classList.remove()

    entfernt eine Klasse aus der classList, ohne die übrigen Klassen zu beeinflussen.

  • classList.contains()

    prüft, ob eine Klasse in der classList liegt

  • classList.toggle()

    toggelt eine Klasse in die classList bzw. hinaus. Beim ersten Aufruf wird die Klasse eingeschaltet, beim zweiten Aufruf wird die Klasse entfernt.

  • classList.item()

    gibt die Klasse an der angegebenen Position innerhalb der Liste zurück

  • classList.toString()

    wandelt die Liste in einen String um

  • classList.length

    gibt die Zahl der Klassen in der classList an

  • classList.value

    fügt dem classList-Objekt eigene Eigenschaft und Methoden hinzu

classList toggle

classList.toggle() ist wie geschaffen für das »slidedown« und »slideup« in den responsiven Menüs der mobilen Geräte.

Das Beispiel nutzt CSS transition für den slide-Effekt.

  • classList.add()
  • classList.contains()
  • classList.item()
  • classList.length
  • classList.remove()
  • classList.toggle
.toggle { 
    transition: height 1s ease-in-out; 
    height: 0px; overflow:hidden;
}
.slowdown { height: 160px }

Das Icon ist eine SVG-Grafik, class toggle ist eine HTML-Liste

<div class="icon">
    <svg  width="100" height="60" viewBox="0 0 600 240">…</svg>
</div>

<ul class="toggle">
    <li>classList.add()</li>
    <li>classList.contains()</li>
	…
</ul>

Zum Toggeln mit Javascript classList reichen ein paar Zeilen Code:

Toggeln mit Javascript classList
<script>
var icon = document.querySelector('.icon');
icon.addEventListener('click', function () {
    document.querySelector('.toggle').classList.toggle('slowdown');
});
</script>

elem.classList.contains

classList.contains() gibt true oder false zurück, je nachdem, ob die Klasse in der Liste der Klassen des Elements enthalten ist oder nicht.

<img id="elem" class="bird1 bird2 bird3" … />
…
if (elem.classList.contains('bird1')) {
}

classList.item

elem.classList.item() gibt den Namen der Klasse an einer Position zurück. classList.item() ist kein Array, also keine eckigen Klammern!


Mehrere Klassen

In jQuery fügt $(elem).addClass("first second third") einem Element gleich mehrere Klassen hinzu; mit classList ist die Syntax ähnlich, aber die einzelnen Klassen müssen in Hochkommas und von Kommas getrennt geschrieben werden.

Javascript classList mehrere Klassen

Der Aufruf

console.log (document.querySelector('#b2').classList);

liefert

DOMTokenList 0: "bird1" 1: "bird2" 2: "bird3" constructor: DOMTokenListConstructor length: 3

Browser-Unterstützung für classList

Internet Explorer unterstützt classList erst ab Version 10, aber es gibt ein Polyfil für classList bei github