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