Element.classList

Das Element.classList ist eine read-only Eigenschaft, welche die aktuelle DOMTokenList Sammlung der Klassen-Attribute des Elements zur├╝ckgibt.

Die Benutzung von classList ist eine angenehme Alternative zum Ansprechen der Klassen eines Elements als die leerzeichengetrennte Zeichenfolge via element.className

Syntax

const elementClasses = elementNodeReference.classList;

elementClasses ist eine DOMTokenList, welche die Klassen-Attribute der elementNodeReference repr├Ąsentiert. Wenn das Klassen-Attribut nicht gesetzt wurde oder elementClasses.length leer ist, wird 0 zur├╝ckgegeben. Element.classList selbst ist nur lesbar (read-only), obgleich es modifiziert werden kann, indem die Methoden add() und remove() angewendet werden.

Methoden

add( String [, String [, ...]] )
F├╝gt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.
remove( String [, String [, ...]] )
Ausgew├Ąhlte Klassenwerte entfernen.
Bemerkung: Entfernen eines nicht vorhandenen Klassenwertes wirft keinen Fehler.
item ( Number )
R├╝ckgabewert nach Index in der Sammlung.
toggle ( String [, force] )
Wenn nur ein Argument vorhanden ist: Klassenwert umschalten; d.h. wenn die Klasse existiert, dann entfernt es diese und gibt false zur├╝ck, wenn nicht, dann f├╝gt es diese hinzu und gibt true zur├╝ck.
Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auf true basiert, f├╝gt es den angegebenen Klassenwert hinzu. Wenn es false auswertet, entfernt es ihn.
contains( String )
├ťberpr├╝ft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.
replace( oldClass, newClass )
Ersetzt einen vorhandenen Klassenwert.

Beispiele

const div = document.createElement('div');
div.className = 'foo';

// Status zum Beginn: <div class="foo"></div>
console.log(div.outerHTML);

// classList-API zum Entfernen und Erg├Ąnzen von Klassen nutzen
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// Wenn visible gesetzt ist entferne es, sonst f├╝ge es hinzu
div.classList.toggle("visible");

// Hinzuf├╝gen/Enfernen von visible, abh├Ąngig von der Bedingung, ob i kleiner 10 ist
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// Mehrere Klassen hinzuf├╝gen / entfernen
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// Mehrere Klassen mittels Spread-Syntax hinzuf├╝gen / entfernen
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// Klasse "foo" durch "bar" ersetzen
div.classList.replace("foo", "bar");

Firefox-Versionen vor 26 setzen nicht die Nutzung die Nutzung von mehreren Argumenten in den Methoden add/remove/toggle um. Siehe https://bugzilla.mozilla.org/show_bug.cgi?id=814014

Polyfill

// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
/**
 * Element.prototype.classList for IE8/9, Safari.
 * @author    Kerem G├╝ne┼č <k-gun@mail.com>
 * @copyright Released under the MIT License <https://opensource.org/licenses/MIT>
 * @version   1.2
 * @see       https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
 */
;(function() {
    // Helpers.
    var trim = function(s) {
            return s.replace(/^\s+|\s+$/g, '');
        },
        regExp = function(name) {
            return new RegExp('(^|\\s+)'+ name +'(\\s+|$)');
        },
        forEach = function(list, fn, scope) {
            for (var i = 0; i < list.length; i++) {
                fn.call(scope, list[i]);
            }
        };

    // Class list object with basic methods.
    function ClassList(element) {
        this.element = element;
    }

    ClassList.prototype = {
        add: function() {
            forEach(arguments, function(name) {
                if (!this.contains(name)) {
                    this.element.className = trim(this.element.className +' '+ name);
                }
            }, this);
        },
        remove: function() {
            forEach(arguments, function(name) {
                this.element.className = trim(this.element.className.replace(regExp(name), ' '));
            }, this);
        },
        toggle: function(name) {
            return this.contains(name) ? (this.remove(name), false) : (this.add(name), true);
        },
        contains: function(name) {
            return regExp(name).test(this.element.className);
        },
        item: function(i) {
            return this.element.className.split(/\s+/)[i] || null;
        },
        // bonus
        replace: function(oldName, newName) {
            this.remove(oldName), this.add(newName);
        }
    };

    // IE8/9, Safari
    // Remove this if statements to override native classList.
    if (!('classList' in Element.prototype)) {
    // Use this if statement to override native classList that does not have for example replace() method.
    // See browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility.
    // if (!('classList' in Element.prototype) ||
    //     !('classList' in Element.prototype && Element.prototype.classList.replace)) {
        Object.defineProperty(Element.prototype, 'classList', {
            get: function() {
                return new ClassList(this);
            }
        });
    }

    // For others replace() support.
    if (window.DOMTokenList && !DOMTokenList.prototype.replace) {
        DOMTokenList.prototype.replace = ClassList.prototype.replace;
    }
})();

Spezifikationen

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von 'Element.classList' in dieser Spezifikation.
Lebender Standard Note within the HTML specification related to the class attribute.
DOM
Die Definition von 'Element.classList' in dieser Spezifikation.
Lebender Standard Initial definition
DOM4
Die Definition von 'Element.classList' in dieser Spezifikation.
Veraltet

Browserkompatibilit├Ąt

Wir konvertieren die Kompatibilit├Ątsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilit├Ątstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8 12 3.6 (1.9.2) 10[1] 11.50 5.1
toggle() method's second argument 24 12 24 (24) Nicht unterst├╝tzt[2] 15 7
Multiple arguments for add() & remove() 28 12 26 (26) Nicht unterst├╝tzt 15 7
replace() Nicht unterst├╝tzt ? 49 (49) Nicht unterst├╝tzt Nicht unterst├╝tzt Nicht unterst├╝tzt
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 12 1.0 (1.9.2) 10[1] 11.10 5.0
toggle method's second argument 4.4 12 24.0 (24) Nicht unterst├╝tzt[2] ? 7.0
multiple arguments for add() & remove() 4.4 12 ? Nicht unterst├╝tzt ? 7.0
replace() Nicht unterst├╝tzt ? 49 (49) Nicht unterst├╝tzt Nicht unterst├╝tzt Nicht unterst├╝tzt

[1] Not supported for SVG elements.  See a report at Microsoft about that.
[2] Internet Explorer never implemented this. See a report at Microsoft about that.

Siehe auch