Атрибут data-*
Обновлено: 07.12.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).