Универсальный атрибут data-*

Универсальные атрибуты accesskey class contenteditable contextmenu data-* dir draggable dropzone hidden id itemid itemprop itemref itemscope itemtype lang spellcheck style tabindex title

Описание

Позволяет создавать свои атрибуты для хранения произвольной информации. Данные могут быть получены с помощью скриптов или через стилевую функцию 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) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
11	8	11.10	6	6

Android	Firefox Mobile	Opera Mobile	Safari Mobile
4	6	11.10	6

✖

Браузеры

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

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

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