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, anstelle von raumbegrenzte 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 du es modifizieren kannst, indem du die add() und remove() Methoden anwendest.

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.

item ( Number )

Rückgabewert nach Index in der Sammlung.

toggle ( String [, force] )

Wenn nur ein Argument vorhanden ist: Toggle class value; D.h. wenn die Klasse existiert, dann entfernt es diese und gibt ein false zurück, wenn nicht, dann fügt es diese hinzu und gibt ein true zurück. Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auf true basiert, fügt es den angegebenen Klassenwert hinzu. Wenn er false auswertet, entfernt es ihn.

contains( String )

Überprüft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.

Beispiele

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar");
div.classList.remove("foo", "bar");

Polyfill

// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function() {
    // helpers
    var regExp = function(name) {
        return new RegExp('(^| )'+ name +'( |$)');
    };
    var 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 += ' '+ name;
                }
            }, this);
        },
        remove: function() {
            forEach(arguments, function(name) {
                this.element.className =
                    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);
        },
        // bonus..
        replace: function(oldName, newName) {
            this.remove(oldName), this.add(newName);
        }
    };

    // IE8/9, Safari
    if (!('classList' in Element.prototype)) {
        Object.defineProperty(Element.prototype, 'classList', {
            get: function() {
                return new ClassList(this);
            }
        });
    }

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

Spezifikationen

Browserkompatibilität

[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

• element.className
• DOMTokenList