data-* глобальные атрибуты HTML

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 #eeeeee;
  opacity: 0;
  transition: 0.5s opacity;
}

li:hover::after {
  opacity: 1;
}

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

• Имя не должно начинаться с xml (без учёта регистра), так как это обозначение зарезервировано для будущих спецификаций XML.
• Имя не должно содержать двоеточия (:), поскольку XML придаёт таким именам особое значение.
• Имя не должно содержать заглавных букв, так как в XML используются только строчные буквы.

Это рекомендации. Если имена им не соответствуют, ошибки не возникнут. CSS по-прежнему будет сопоставлять атрибуты с помощью селекторов атрибутов: имена атрибутов при этом не будут учитывать регистр, а значения атрибутов будут учитывать его. Атрибуты, не соответствующие этим трём рекомендациям, также будут распознаваться свойством JavaScript HTMLElement.dataset, а пользовательские агенты включат их в DOMStringMap, содержащий все пользовательские атрибуты данных элемента HTMLElement.

Если вы планируете использовать HTMLElement.dataset, часть имени атрибута после data- может содержать только символы, допустимые в именах свойств JavaScript (а также дефисы, которые будут удалены). dataset вариант имени атрибута удаляет префикс «data-» и преобразует оставшуюся часть из kebab-case в camelCase. Например, element.getAttribute("data-test") эквивалентно element.dataset.test, а data-test-abc будет доступно как HTMLElement.dataset.testAbc (или через HTMLElement.dataset["testAbc"]). Не используйте неалфавитные символы после дефиса, например data-test-1 или data--test, поскольку HTMLElement.dataset не будет их распознавать.

Примечания по использованию

Добавив атрибуты data-*, можно превратить даже обычные элементы HTML в довольно сложные и мощные программные объекты. Например, космический корабль «спрайт» в игре может быть всего лишь элементом <img> с атрибутом class и несколькими атрибутами 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" />

function clickSpaceship() {
  spaceships[this.dataset.shipId].blasted();
}

document.querySelectorAll("img.spaceship").forEach((ship) => {
  ship.addEventListener("click", clickSpaceship);
});

Подробное руководство по использованию атрибутов данных HTML см. в статье Использование атрибутов данных.

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

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

См. также

• Все глобальные атрибуты.
• Свойство HTMLElement.dataset, позволяющее получать доступ к этим значениям и изменять их.
• Использование атрибутов данных