Универсальный атрибут 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>

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

Internet Explorer	Chrome	Opera	Safari	Firefox
11	8	11.10	6	6

Android	Firefox Mobile	Opera Mobile	Safari Mobile
4	6	11.10	6

✖

Браузеры

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

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

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