Атрибут data-*

Обновлено: 25.05.2022

Атрибут data-*

Позволяет создавать свои атрибуты для хранения произвольной информации. Данные могут быть получены с помощью скриптов или через стилевую функцию attr().

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

Имена атрибутов трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:

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

Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth.

Для обращения к атрибутам и получения их значений через скрипты применяется метод dataset. Он же используется и для установки нового значения.

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

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

Пример

Браузеры

data-*

Посмотреть совместимость на Can I use?

data-*