Атрибуты data-

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

Атрибуты данных были введены в HTML5, который поддерживается всеми современными браузерами, но старые браузеры не распознают атрибуты данных. Однако в спецификациях HTML указано, что атрибуты, которые не распознаются браузером, должны игнорироваться, и браузер просто не использует их при рендеринге страницы. Веб-разработчики использовали этот факт для создания нестандартных атрибутов, которые являются атрибутами, не входящими в спецификации HTML. Например, атрибут value в нижеприведенной строке считается нестандартным атрибутом, поскольку спецификация тега <img> не имеет атрибута value и он не является глобальным атрибутом:

<img src="sample.jpg" value="test" />

Это означает, что, хотя атрибуты данных не поддерживаются в старых браузерах, но они будут работать, и вы можете устанавливать и извлекать их с использованием общих методов JavaScript setAttribute и getAttribute, однако вы не можете использовать новое свойство dataset, которое поддерживается только в современных браузерах.

HTML5-атрибуты data-* обеспечивают удобный способ хранения данных в HTML-элементах. Сохраненные данные могут быть прочитаны или изменены с помощью JavaScript.

<div data-index-number="1234" id="user">
    … 
</div>

Для доступа к атрибуту можно воспользоваться кодом:

var  user = document.getElementById('user');
user.dataset.indexNumber // "1234"
  • Структура атрибута данных: data- *, то есть имя атрибута данных появляется после части data-. Используя это имя, можно получить доступ к атрибуту.
  • Данные в формате строки (включая json) могут быть сохранены с использованием атрибута data- *.