Атрибут data-*


11	12	7	11.5	5.1	6


4.4	6	14	5

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

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

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

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

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

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

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

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

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>data-*</title> </head> <body> <div id="user" data-id="1234567890" data-user="Вася Пупкин" data-date-of-birth="01.04.1990">Пользователь</div> <script> var el = document.getElementById('user'); id = el.dataset.id; // Получаем значение атрибута data-id user = el.dataset.user; dob = el.dataset.dateOfBirth; // Получаем значение атрибута data-date-of-birth el.dataset.ban = 'Нет'; // Назначаем новый атрибут data-ban и его значение console.log(user); // Выводим в консоль значение переменной user console.log(dob); // Выводим в консоль значение переменной dob </script> </body> </html>

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

Спецификация	Статус
HTML Living Standard	Живой стандарт