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
|
---
title: Использование data-* атрибутов
slug: Web/Guide/HTML/Using_data_attributes
tags:
- Guide
- HTML
translation_of: Learn/HTML/Howto/Use_data_attributes
---
<p><a href="/ru/docs/Web/Guide/HTML/HTML5">HTML5</a> спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. <a href="/ru/docs/Web/HTML/Global_attributes#data-*"><code>data-*</code> атрибуты</a> позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.</p>
<h2 id="Синтаксис_HTML">Синтаксис HTML</h2>
<p>Синтаксис прост — любой атрибут, чьё имя начинается с <code>data-</code>, является <code>data-*</code> атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать <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="Доступ_в_JavaScript">Доступ в JavaScript</h2>
<p>Чтение <code>data-</code>атрибутов в <a href="/ru/docs/Web/JavaScript">JavaScript</a> осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.</p>
<p>Чтобы получить <code>data</code>-атрибут можно взять свойство объекта <code>dataset</code> с именем, равным части имени атрибута после <code>data-</code> (обратите внимание, что дефисы в имени преобразуются в camelCase).</p>
<pre><code>var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"</code></pre>
<p>Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода <code>article.dataset.columns = 5</code> приведёт к тому, что новое значение атрибута станет равным <code>"5"</code>.</p>
<h2 id="Доступ_в_CSS">Доступ в CSS</h2>
<p>Заметим, что <code>data</code>-атрибуты являются обычными HTML-аттрибутами, к которым можно получить доступ в <a href="/ru/docs/Web/CSS">CSS</a>. Например, чтобы показать родительские данные о статье можно использовать <a href="/ru/docs/Web/CSS/content">генерируемый контент</a> и CSS функцию {{cssxref("attr")}}:</p>
<pre class="brush: css">article::before {
content: attr(data-parent);
}</pre>
<p>Также можно использовать <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов </a>в CSS для изменения стилей в соответствии с данным:</p>
<pre class="brush: css">article[data-columns='3']{
width: 400px;
}
article[data-columns='4']{
width: 600px;
}</pre>
<p>Увидеть как это работает можно <a href="https://jsbin.com/ujiday/2/edit">в примере на JSBin</a>.</p>
<p><code>Data</code>-аттрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">скринкаст</a> чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. <a href="https://jsbin.com/atawaz/3/edit">Пример кода из скринкаста можно также посмотреть на JSBin</a>.</p>
<h2 id="Проблемы">Проблемы</h2>
<p>Не храните данные, которые должны быть видимы и доступны в <code>data</code>-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в <code>data</code>-атрибутах.</p>
<p>Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии <a href="https://caniuse.com/#feat=dataset">не поддерживают <code>dataset</code></a>. Для поддержки IE 10 и более ранних версий получение доступа к <code>data</code>-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, <a href="https://jsperf.com/data-dataset">производительность чтения <code>data-</code>атрибутов</a> по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование <code>dataset</code> ещё медленнее, чем чтение данных с <code>getAttribute()</code>.</p>
<p>Тем не менее, для пользовательских метаданных, связанных с элементами, <code>data-</code>атрибуты являются отличным решением.</p>
<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
<table class="standard-table">
<caption>caniuse</caption>
<thead>
<tr>
<th scope="col">
<h4 id="IE">IE</h4>
</th>
<th scope="col">
<h4 id="Edge">Edge</h4>
</th>
<th scope="col">
<h4 id="Firefox">Firefox</h4>
</th>
<th scope="col">
<h4 id="Chrome">Chrome</h4>
</th>
<th scope="col">
<h4 id="Safari">Safari</h4>
</th>
<th scope="col">
<h4 id="Opera">Opera</h4>
</th>
<th scope="col">
<h4 id="iOS_Safari">iOS Safari</h4>
</th>
<th scope="col">
<h4 id="Opera_Mini*">Opera Mini<sup>*</sup></h4>
</th>
<th scope="col">
<h4 id="Android_Browser">Android Browser</h4>
</th>
<th scope="col">
<h4 id="Chrome_for_Android">Chrome for Android</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>11+</td>
<td>14+</td>
<td>52+</td>
<td>49+</td>
<td>10.1+</td>
<td>46+</td>
<td>9.3+</td>
<td>all</td>
<td>4.4+</td>
<td>59+</td>
</tr>
</tbody>
</table>
<p> </p>
<p>Тем не менее, для содержимого, которое не надо показывать это является отличным решением.</p>
<h2 id="См._также">См. также</h2>
<ul>
<li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
<li><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
</ul>
|
