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- *:

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

Specifications

Specification Status Comment
HTML Living Standard
Определение 'data-*' в этой спецификации.
Живой стандарт No change from latest snapshot, HTML 5.1
HTML 5.1
Определение 'data-*' в этой спецификации.
Рекомендация Snapshot of HTML Living Standard, no change from HTML5
HTML5
Определение 'data-*' в этой спецификации.
Рекомендация Snapshot of HTML Living Standard, initial definition.

Browser compatibility

BCD tables only load in the browser

See also