data-*

The data-* Глобальные атрибуты образуют класс атрибутов, называемых пользовательскими атрибутами данных, которые позволяют обмениваться проприетарной информацией между HTML и его представлением DOM посредством сценариев.

Интерактивный пример

<h1>Secret agents</h1>
<ul>
 <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>
 <li data-id="97865">
 Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in
 "Goldeneye".
 </li>
 <li data-id="45732">
 James Bond, 007: The main man; shaken but not stirred.
 </li>
</ul>

h1 {
 margin: 0;
}
ul {
 margin: 10px 0 0;
}
li {
 position: relative;
 width: 200px;
 padding-bottom: 10px;
}
li:after {
 content: "Data ID: " attr(data-id);
 position: absolute;
 top: -22px;
 left: 10px;
 background: black;
 color: white;
 padding: 2px;
 border: 1px solid #eee;
 opacity: 0;
 transition: 0.5s opacity;
}
li:hover:after {
 opacity: 1;
}

Все такие пользовательские данные доступны через интерфейс HTMLElement элемента, для которого установлен атрибут. Свойство HTMLElement.dataset предоставляет к ним доступ. Символ * может быть заменён любым именем, соответствующим производственному правилу имён xml, со следующими ограничениями:

• имя не должно начинаться с xml, в любом случае для этих букв используется регистр;
• имя не должно содержать точку с запятой (U + 003A);
• имя не должно содержать заглавных букв.

Обратите внимание, что свойство HTMLElement.dataset является DOMStringMap, и имя настраиваемого атрибута данных data-test-value будет доступно через HTMLElement.dataset. testValue (или HTMLElement.dataset ["testValue"]), поскольку любая тире (U + 002D) заменяется заглавной буквой следующей буквы, преобразуя имя в camelcase.

Использование

Добавляя атрибуты data- *, даже обычные элементы HTML могут стать довольно сложными и мощными программными объектами. Например, «спрайт» космического корабля в игре может быть простым элементом <img> с атрибутом класса и несколькими атрибутами data- *:

<img class="spaceship cruiserX3" src="shipX3.png"
 data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
 data-x="414354" data-y="85160" data-z="31940"
 onclick="spaceships[this.dataset.shipId].blasted()">
</img>

Более подробное руководство по использованию атрибутов данных HTML см. В разделе Using data attributes.

Спецификации

Совместимость с браузерами

Смотрите также

• All global attributes.
• The HTMLElement.dataset property that allows to access and modify these values.
• Using data attributes