Element.classList

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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 angenehmen 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");

Versions of Firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods. See https://bugzilla.mozilla.org/show_bug.cgi?id=814014

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

Spezifikation Status Kommentar
WHATWG 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.
Empfehlung  

Browserkompatibilität

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

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: StevenS77
 Zuletzt aktualisiert von: StevenS77,