data-*

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

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

Все такие пользовательские данные доступны через интерфейс 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- *:

html
<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.

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

Specification
HTML
# attr-data-*

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
data-* attributes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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