--- title: Element.classList slug: Web/API/Element/classList translation_of: Web/API/Element/classList ---
{{APIRef("DOM")}}

Element.classList jest właściwością tylko do odczytu, która zwraca zbiór live {{domxref("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 {{domxref("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");

Wersje Firefoxa wcześniejsze niż 26 nie implementują użycia niektórych argumentów metod dodaj/usuń/przełącz (add/remove/toggle). Zobacz https://bugzilla.mozilla.org/show_bug.cgi?id=814014

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

Specifikacja Status Komentarz
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}} {{Spec2("HTML WHATWG")}} Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}} {{Spec2("DOM WHATWG")}} Initial definition
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}} {{Spec2("DOM4")}}  

Zgodność z przeglądarkami

{{CompatibilityTable}}
Cecha Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Zgodność podstawowa 8 12 {{CompatGeckoDesktop(1.9.2)}} 10[1] 11.50 5.1
toggle() method's second argument 24 12 {{CompatGeckoDesktop(24)}} {{CompatNo}}[2] 15 7
Multiple arguments for add() & remove() 28 12 {{CompatGeckoDesktop(26)}} {{CompatNo}} 15 7
replace() {{CompatNo}} {{CompatUnknown}} {{CompatGeckoDesktop("49")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Cecha Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Wsparcie podstawowe 3.0 12 {{CompatGeckoMobile(1.9.2)}} 10[1] 11.10 5.0
toggle method's second argument 4.4 12 {{CompatGeckoMobile(24)}} {{CompatNo}}[2] {{CompatUnknown}} 7.0
multiple arguments for add() & remove() 4.4 12 {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}} 7.0
replace() {{CompatNo}} {{CompatUnknown}} {{CompatGeckoDesktop("49")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

[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ż