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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: HTMLElement.dataset
slug: Web/API/HTMLElement/dataset
translation_of: Web/API/HTMLOrForeignElement/dataset
---
<div>{{ APIRef("HTML DOM") }}</div>
<p><span class="seoSummary">Właściwość <code><strong>dataset</strong></code> interfejsu {{domxref("HTMLElement")}} pozwala na odczyt/zapis <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">niestandardowcyh atrybutów</a> (<code>data-*</code>) elementu.</span> Dostęp ten jest możliwy w HTMLu jak i w DOMie. It is a <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, one entry for each custom data attribute. Zauważ że właściwość<strong> </strong><code>dataset</code><strong> </strong>można odczytać, ale nie zmieniać bezpośrednio. Zamiast tego, wszystkie zapisy muszą być wykonywane na pojedynczych polach <code>dataset</code>, które odpowiadają atrybutom danych. Note also that an HTML <code><strong>data-</strong></code><em>attribute</em> and its corresponding DOM<strong> </strong><code>dataset.</code><em>property</em> do not share the same name, but they are always similar:</p>
<ul>
<li>The name of a custom data attribute in HTML begins with <code>data-</code>. It must contain only letters, numbers and the following characters: dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) -- but NOT any ASCII capital letters (<code>A</code> to <code>Z</code>).</li>
<li>The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.</li>
</ul>
<p>In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p>
<h3 id="Zmiana_nazw">Zmiana nazw</h3>
<p>dash-style to camelCase: A custom data attribute name is transformed to a key for the {{ domxref("DOMStringMap") }} entry with the following rules</p>
<ul>
<li>the prefix <code>data-</code> is removed (including the dash);</li>
<li>for any dash (<code>U+002D</code>) followed by an<span style="line-height: 1.5;"> ASCII lowercase letter </span><code>a</code><span style="line-height: 1.5;"> to </span><code>z</code><span style="line-height: 1.5;">, the dash is removed and the letter is transformed into its uppercase counterpart;</span></li>
<li>other characters (including other dashes) are left unchanged.</li>
</ul>
<p>camelCase to dash-style: The opposite transformation, that maps a key to an attribute name, uses the following rules:</p>
<ul>
<li>Restriction: A dash must not be immediately followed by an ASCII lowercase letter <code>a</code> to <code>z</code> (before the transformation);</li>
<li>a prefix <code>data-</code> is added;</li>
<li>any ASCII uppercase letter <code>A</code> to <code>Z</code> is transformed into a dash followed by its lowercase counterpart;</li>
<li>other characters are left unchanged.</li>
</ul>
<p>The restriction in the rules above ensures that the two transformations are the inverse one of the other.</p>
<p>For example, the attribute named <code>data-abc-def</code> corresponds to the key <code>abcDef</code>.</p>
<ul>
</ul>
<h3 id="Dostęp_do_wartości">Dostęp do wartości</h3>
<ul>
<li>Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in <em>element.</em>dataset.<em>keyname</em></li>
<li>Attributes can also be set and read using the object-properties bracket-syntax, as in <em>element.</em>dataset[<em>keyname</em>]</li>
<li>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in operator</a> can be used to check whether a given atttribute exists.</li>
</ul>
<h3 id="Ustawianie_wartości">Ustawianie wartości</h3>
<ul>
<li>Podawana podczas ustawiania atrybutu wartość jest zawsze zapisywana jako łańcuch znaków, np. <code>null</code> jest zapisywane jako "null".</li>
<li>Usunięcie atrybutu jest możliwe przy pomocy <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operatora delete</a>.</li>
</ul>
<h2 id="Składnia">Składnia</h2>
<ul>
<li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li>
<li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li>
<br>
<li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li>
<li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li>
<br>
<li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li>
</ul>
<h2 id="Przykłady">Przykłady</h2>
<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre>
<pre class="brush: js">const el = document.querySelector('#user');
// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''
// set the data attribute
el.dataset.dateOfBirth = '1960-10-03';
// Result: el.dataset.dateOfBirth === 1960-10-03
delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined
// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true
</pre>
<h2 id="Specyfikacje">Specyfikacje</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specyfikacja</th>
<th scope="col">Status</th>
<th scope="col">Komentarz</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.HTMLElement.dataset")}}</p>
<h2 id="Zobacz_także">Zobacz także</h2>
<ul>
<li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li>
<li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Używanie atrybutów danych</a></li>
<li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li>
</ul>
|
