diff options
Diffstat (limited to 'files/pl/web/api/element/classlist/index.html')
| -rw-r--r-- | files/pl/web/api/element/classlist/index.html | 264 |
1 files changed, 264 insertions, 0 deletions
diff --git a/files/pl/web/api/element/classlist/index.html b/files/pl/web/api/element/classlist/index.html new file mode 100644 index 0000000000..5e7112b8d5 --- /dev/null +++ b/files/pl/web/api/element/classlist/index.html @@ -0,0 +1,264 @@ +--- +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 <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, <code>i</code> 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");</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 < 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; + } +})(); +</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> & <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> & <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> |