Содержание
HTML глобальный атрибут: data-* (данные-*)
Глобальный атрибут data-* образует класс атрибутов, называемых пользовательскими атрибутами данных , которые позволяют обмениваться частной информацией между HTML и его представлением DOM с помощью сценариев.
Используется для хранения пользовательских данных, относящихся к конкретной странице или приложению.
Интерактивный пример
В данном примере к элементу <meter> добавляется атрибут data-description содержащий необходимый текст для вывода. Само отображение происходит с помощью псевдоэлемента ::after и свойства content, значением которого как раз и выступает функция attr().
Использование
Примечание
Имя атрибута должно обязательно начинаться с data-, дальше можно использовать латинские буквы в нижнем регистре, цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_).
Имена атрибутов трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:
- data- удаляется;
- любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
- любые другие буквы остаются неизменными.
Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth.
data-description превращается в description. data-full-description превращается fullDescription. data-description-of-tag превращается descriptionOfTag.
Синтаксис
<element data-*="значение">
<div id="user" data-id="1234567890"
data-user="Вася Пупкин"
data-date-of-birth="01.04.1990">Пользователь</div>
Значения атрибута
- Значения: Определяет значение атрибута (в виде строки)
- Значение по умолчанию: Нет.
Ссылки и Дополнения
Более подробное руководство по использованию атрибутов данных HTML см. в разделе Использование атрибутов данных.