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 Standard
# attr-data-*

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

BCD tables only load in the browser

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