Element.classList

Element.classList jest właściwością tylko do odczytu, która zwraca zbiór live DOMTokenList atrybutów klasy danego elementu.

Używanie classList stanowi wygodną alternatywę uzyskiwania dostępu do listy klas danego elementu w formie skompresowanego stringa poprzez element.className.

Składnia

const elementClasses = elementNodeReference.classList;

elementClasses to DOMTokenList reprezentujący atrybuty klasy elementNodeReference. Jeśli atrybut klasy nie został określony lub jest pusty, elementClasses.length zwraca 0. Sam w sobie element.classList jest tylko do odczytu, ale można go mimo to modyfikować poprzez stosowanie metod add() i remove().

Metody

add( String [, String] )

Nadaje określone wartości klasy. Jeśli wartości te już istnieją w atrybucie elementu, wówczas zostają zignorowane.

remove( String [,String] )

Usuwa określone wartości klasy.

item ( Number )

Zwraca wartosć klasy wg indeksu w zbiorze.

toggle ( String [, force] )

Jeśli występuje tylko jeden argument: Przełącza wartość klasy, tzn. jeśli klasa istnieje, wówczas zostaje usunięta i zwraca false, jeśli nie, wówczas dodaje ją i zwraca true.
Jeśli występuje również drugi argument: Jeśli drugi argument uznawany jest za true, dodaje określoną wartość klasy, natomiast jeśli zostaje uznany za false, wówczas zostaje usunięty.

contains( String )

Sprawdza, czy określona wartość klasy istnieje w atrybucie klasy danego elementu.

Przykłady

// div jest obiektem odwołującym się do elementu <div> o klasie ="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// jeśli ustawiona jest widoczność usuwa ją, w przeciwnym wypadku dodaje
div.classList.toggle("visible");

// dodaj/usuń (add/remove) jest widoczne, w zależności od warunku testowego, i mniejsze od 10
div.classList.toggle("visible", i < 10 );

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

// dodaj lub usuń złożone klasy
div.classList.add("foo", "bar");
div.classList.remove("foo", "bar");

Polyfill

// Źródło: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function() {
    // pomocnicy
    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]);
        }
    };

    // obiekt listy klasy z podstawowymi metodami
    function ClassList(element) {
        this.element = element;
    }

    ClassList.prototype = {
        add: function() {
            forEach(arguments, function(name) {
                if (!this.contains(name)) {
                    this.element.className += this.element.className.length > 0 ? ' ' + name : 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() wspierane przez pozostałe przeglądarki
    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
        DOMTokenList.prototype.replace = ClassList.prototype.replace;
    }
})();

Specyfikacje

Zgodność z przeglądarkami

[1] Brak wsparcia dla elementów SVG. Zobacz raport w tej kwestii na stronie Microsoftu.
[2] Internet Explorer nigdy tego nie zimplementował. Zobacz raport w tej kwestii na stronie Microsoftu.

Zobacz również

• element.className
• DOMTokenList