Атрибут data-*

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

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

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

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

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

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

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

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

Пример

<!DOCTYPE html> <html> <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>

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5.1Рабочий проект
HTML5Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

1112811.1066
4611.106

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 19.03.2018
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты