data-*

Описание

Атрибуты данных позволяют создавать пользовательские атрибуты для хранения произвольной информации. Данные могут быть получены с помощью скриптов . Имя атрибута должно обязательно начинаться с data-, дальше можно использовать латинские буквы в нижнем регистре, цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_). Вообще можно создавать любые нестандартные атрибуты, обратиться к которым можно с помощью методов JavaScript setAttribute и getAttribute, однако таким образом нельзя обратится к атрибуту через свойство элемента. Поэтому в HTML5 была добавлена возможность использования пользовательских атрибутов посредством глобального атрибута data-*, доступ к которому можно осуществить через свойство элемента dataset. Пользовательские атрибуты data-* предназначены для хранения пользовательских данных, состояний, аннотаций и т.д., для которых нет более подходящих атрибутов или элементов.

Синтаксис

<element data-* = "value">

Например,

<span data-mytrans-en="Contacts">Контакты</span>

В коде JavaScript можно получить значение этого атрибута или задать:

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

Например в нашем случае:

val = el.dataset.mytransEn;
el.dataset.mytransEn = val;

Имена атрибутов преобразуются в свойство по определенным правилам:

  • data- заменяется на dataset.;
  • любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
  • остальные буквы остаются неизменными. Например, атрибут data-has-payment-request преобразуется в переменную dataset.hasPaymentRequest. Обратите внимание, что первая буква ('h') после data- остается в нижнем регистре.

Пример

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

Настольные браузеры

Базовая поддержка 71261111.55.1

Мобильные браузеры

Базовая поддержка 370дада125да

См. также: