path: root/files/pl/web/api/element/classlist/index.html

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

<p><code><strong>Element.classList</strong></code> jest właściwością tylko do odczytu, która zwraca zbiór live {{domxref("DOMTokenList")}} atrybutów klasy danego elementu.</p>

<p>Używanie <code>classList</code> stanowi wygodną alternatywę uzyskiwania dostępu do listy klas danego elementu w formie skompresowanego stringa poprzez {{domxref("element.className")}}.</p>

<h2 id="Składnia">Składnia</h2>

<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
</pre>

<p><em>elementClasses</em> to <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> reprezentujący atrybuty klasy <em>elementNodeReference</em>. Jeśli atrybut klasy nie został określony lub jest pusty, <em>elementClasses.length</em> zwraca 0. Sam w sobie <code>element.classList</code> jest tylko do odczytu, ale można go mimo to modyfikować poprzez stosowanie metod <code>add()</code> i <code>remove()</code>.</p>

<h2 id="Metody">Metody</h2>

<dl>
 <dt>add( String [, String] )</dt>
 <dd>Nadaje określone wartości klasy. Jeśli wartości te już istnieją w atrybucie elementu, wówczas zostają zignorowane.</dd>
 <dt>remove( String [,String] )</dt>
 <dd>Usuwa określone wartości klasy.</dd>
 <dt><strong>item</strong> ( Number )</dt>
 <dd>Zwraca wartosć klasy wg indeksu w zbiorze.</dd>
 <dt><strong>toggle</strong> ( String [, force] )</dt>
 <dd>Jeśli występuje tylko jeden argument: Przełącza wartość klasy, tzn. jeśli klasa istnieje, wówczas <u>zostaje usunięta</u> i zwraca <code>false</code>, jeśli nie, wówczas <u>dodaje ją</u> i zwraca <code>true</code>.<br>
 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.</dd>
 <dt>contains( String )</dt>
 <dd>Sprawdza, czy określona wartość klasy istnieje w atrybucie klasy danego elementu.</dd>
</dl>

<h2 id="Przykłady">Przykłady</h2>

<pre class="brush: js">// div jest obiektem odwołującym się do elementu &lt;div&gt; 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, <code>i</code> mniejsze od 10
div.classList.toggle("visible", i &lt; 10 );

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

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

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

<h2 id="Polyfill">Polyfill</h2>

<pre class="brush:js">// Ź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 &lt; 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 &gt; 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 &amp;&amp; DOMTokenList.prototype.replace == null) {
        DOMTokenList.prototype.replace = ClassList.prototype.replace;
    }
})();
</pre>

<h2 id="Specyfikacje">Specyfikacje</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifikacja</th>
   <th scope="col">Status</th>
   <th scope="col">Komentarz</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Initial definition</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Cecha</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Zgodność podstawowa</td>
   <td>8</td>
   <td>12</td>
   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
   <td>10<sup>[1]</sup></td>
   <td>11.50</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td><code>toggle()</code> method's second argument</td>
   <td>24</td>
   <td>12</td>
   <td>{{CompatGeckoDesktop(24)}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>15</td>
   <td>7</td>
  </tr>
  <tr>
   <td>Multiple arguments for <code>add()</code> &amp; <code>remove()</code></td>
   <td>28</td>
   <td>12</td>
   <td>{{CompatGeckoDesktop(26)}}</td>
   <td>{{CompatNo}}</td>
   <td>15</td>
   <td>7</td>
  </tr>
  <tr>
   <td><code>replace()</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("49")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Cecha</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Wsparcie podstawowe</td>
   <td>3.0</td>
   <td>12</td>
   <td>{{CompatGeckoMobile(1.9.2)}}</td>
   <td>10<sup>[1]</sup></td>
   <td>11.10</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td>toggle method's second argument</td>
   <td>4.4</td>
   <td>12</td>
   <td>{{CompatGeckoMobile(24)}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>7.0</td>
  </tr>
  <tr>
   <td>multiple arguments for <code>add()</code> &amp; <code>remove()</code></td>
   <td>4.4</td>
   <td>12</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>7.0</td>
  </tr>
  <tr>
   <td><code>replace()</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("49")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Brak wsparcia dla elementów SVG. Zobacz <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">raport w tej kwestii na stronie Microsoftu</a>.<br>
 [2] Internet Explorer nigdy tego nie zimplementował. Zobacz <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">raport w tej kwestii na stronie Microsoftu</a>.</p>

<h2 id="Zobacz_również">Zobacz również</h2>

<ul>
 <li>{{domxref("element.className")}}</li>
 <li>{{domxref("DOMTokenList")}}</li>
</ul>