HTML Атрибут data-*

Атрибут data-* (от англ. "data" ‒ «данные») является универсальным, так как его можно использовать практически для любых целей. В частности основной задачей данного атрибута является хранение пользовательских данных частной страницы или приложения, для которых больше нет соответствующих атрибутов или элементов.

Данный атрибут условно делится на 2 составляющие:

1. Приставка data- определяющая данный атрибут;
2. Следующее за приставкой data- пользовательское имя атрибута, которое может быть задано любым количеством символов, но не менее одного символа после приставки. Можно использовать латинские буквы в нижнем регистре (даже если всё же имя атрибута прописывается заглавными буквами, они все автоматически переводятся в соответствующие символы нижнего регистра), цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_).

Синтаксис

Синтаксис прост — любой атрибут, чье имя начинается с data-, является data-* атрибутом. Допустим у вас имеется статья и вы хотите сохранить дополнительную информацию без её визуального представления. Используйте для этого data-атрибуты:

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Значения

В качестве значения может указываться любое значение, соответствующее замыслу пользователя.

Значение по умолчанию

Нет.

Применяется к тегам

Атрибут data-* относится к глобальным атрибутам, и может быть использован с любым элементом HTML.

Доступ в JavaScript

Все браузеры позволяют вам получить и изменить data-атрибуты в JavaScript с использованием методов getAttribute и setAttribute.
Но стандарты предоставляют более простой способ — у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:

• приставка data- удаляется;
• любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
• другие дефисы остаются неизменными;
• любые другие буквы остаются неизменными.

Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth. Для обращения к атрибутам и получения их значений через скрипты применяется метод dataset. Он же используется и для установки нового значения.

значение = элемент.dataset.атрибут
элемент.dataset.атрибут = значение

Здесь имя атрибута — это переменная, полученная путём изменения атрибута по вышеприведённым правилам (dateOfBirth, а не data-date-of-birth или date-of-birth).

Примеры использования:

Доступ к data-атрибутам с использованием метода getAttribute

<ul>
  <li data-animal-type="птица">Сова</li>
  <li data-animal-type="рыба">Лосось</li> 
  <li data-animal-type="паук">Тарантул</li> 
</ul>

Доступ к data-атрибутам с использованием метода dataset

<div id="user" data-id="1234567890" 
       data-user="Вася Тёркин" 
       data-date-of-birth="01.07.1990">Пользователь</div>

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

Учебник HTML

HTML уроки: HTML Атрибуты