1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
title: Używanie atrybutów danych
slug: Learn/HTML/Howto/Use_data_attributes
tags:
- Atrybuty data
- HTML5
- Web
translation_of: Learn/HTML/Howto/Use_data_attributes
---
<div>
<p>{{LearnSidebar}}<br>
<a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> został zaprojektowany z myślą o rozszerzalności dla danych, które powinny być powiązane z konkretnym elementem, ale nie muszą mieć określonego znaczenia. <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset">Atrybuty <code>data-*</code></a> pozwalają nam przechowywać dodatkowe informacje w standardowych, semantycznych elementach HTML bez zbędnych obejść takich jak niestandardowe atrybuty, dodatkowe właściwości w DOMie, lub używanie {{domxref("Node.setUserData()")}}.</p>
</div>
<h2 id="Składnia_HTML">Składnia HTML</h2>
<p>Składnia jest prosta. Jakikolwiek atrybut, którego nazwa zaczyna się od <code>data-</code> jest atrybutem danych. Powiedzmy, że masz element taki jak <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">article</span></font>, w którym chcesz przechowywać dodatkowe dane. W tym celu możesz użyć atrybutu <code>data</code> :</p>
<pre class="brush: html"><article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article></pre>
<h2 id="Dostęp_w_JavaScript">Dostęp w JavaScript</h2>
<p>Odczytanie wartości tych atrybutów w <a href="/en-US/docs/Web/JavaScript">JavaScript</a> jest także bardzo proste. Mógłbyś użyć {{domxref("Element.getAttribute", "getAttribute()")}} podając pełną nazwę HTML atrybutów by je odczytać, jednakże standard wskazuje na łatwiejszą metodę: {{domxref("DOMStringMap")}} można odczytać przez właściwość {{domxref("HTMLElement.dataset", "dataset")}}.</p>
<p>By odczytać atrybut <code>data</code> przez obiekt <code>dataset</code>, użyj części nazwy atrybutu zaraz po <code>data-</code> (pauzy zamieniane są na camelCase).</p>
<pre class="brush: js">var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"</pre>
<p>Każda wartość jest łańcuchem znaków i może zostać odczytania i zapisana. W powyższym przykładzie, użycie <code>article.dataset.columns = 5</code> zamieni wartość tego atrybutu na <code>"5"</code>.</p>
<h2 id="Dostęp_w_CSS">Dostęp w CSS</h2>
<p>Warto zwrócić uwagę, że atrybuty danych to zwyczajne atrybuty HTML, więc można się do nich dostać w <a href="/en-US/docs/Web/CSS">CSS-ie</a>. By np. pokazać zawartość takiego atrybutu można użyć <a href="/en-US/docs/Web/CSS/content">content</a> w CSS z funkcją {{cssxref("attr")}}:</p>
<pre class="brush: css">article::before {
content: attr(data-parent);
}</pre>
<p>Możesz też użyć <a href="/en-US/docs/Web/CSS/Attribute_selectors">selektorów atrybutu</a> w CSS by zmienić styl głównego elementu w zależności od wartości atrybutów danych:</p>
<pre class="brush: css">article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}</pre>
<p>Możesz zobaczyć jak to działa <a href="http://jsbin.com/ujiday/2/edit">w tym przykładzie na JSBin</a>.</p>
<p>Atrybuty danych można także używać do przechowywania danych, które stale się zmieniają, jak np. wyniki w grze. Używając selektorów CSS oraz JavaScript pozwala uzyskać fajne efekty bez pisania żmudnych procedur wyświetlania. Zobacz <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">to nagranie</a> dla przykładu użycia wygenerowanej treści i przejść w CSS-ie (<a href="http://jsbin.com/atawaz/3/edit">przykład na JSBin</a>).</p>
<p>Wartości tych atrybutów to łańcuchy znakow. Wartości numeryczne należy opakować w cudzysłów w selektorze by zostały one uwzględnione.</p>
<h2 id="Problemy">Problemy</h2>
<p>Nie należy przechowywać w atrybutach danych treści, które powinny być widoczne dla użytkownika, ponieważ programy ułatwiające dostęp nie będą mogły się do nich dostać. Ponadto wyszukiwarki mogą nie indeksować wartości atrybutów danych.</p>
<p>Najważniejszym problemem jaki należy wziąć pod uwagę to wydajność i wsparcie w przeglądarce Internet Explorer. Internet Explorer 11+ wspiera standard atrybutu danych, ale wcześniejsze wersje <a href="http://caniuse.com/#feat=dataset">nie wspierają obiektu <code>dataset</code></a>. By wykorzystywać atrybuty danych w IE 10 i wcześniejszych wersach, musisz użyć {{domxref("Element.getAttribute", "getAttribute()")}}. Dodatkowo <a href="http://jsperf.com/data-dataset">wydajność czytania atrybutów danych</a> jest gorsza od trzymania danych w zwyczajnych obiektach JS.</p>
<p>Pomimo to, atrybuty danych są świetnym rozwiązaniem dla obsługi meta danych powiązanych z elementami HTML.</p>
<p>W Firefox 49.0.2 (i być może w nowszych lub starszych wersjach), atrybuty danych które przekraczają 1022 znaków nie zostaną odczytane przez Javascript (EcmaScript 4).</p>
<h2 id="Zobacz_też">Zobacz też</h2>
<ul>
<li>Ten artykuł jest oparty na <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS pochodzącego z hacks.mozilla.org</a>.</li>
<li>Atrybuty są także wspierane w SVG 2; zobacz {{domxref("SVGElement.dataset")}} i {{SVGAttr("data-*")}}.</li>
<li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
</ul>
|
