HTML глобальный атрибут data-*

Определение и применение

Глобальный атрибут data-* используется для хранения пользовательских данных (возможность вставить атрибут с пользовательскими данными к любому HTML элементу). Данный атрибут даёт возможность, используя JavaScript предоставить более расширенные возможности для пользователя, не прибегая к запросам на стороне сервера.

Имя атрибута не должно содержать заглавные буквы, а также должно содержать по крайней мере один символ после приставки data-. Значением атрибута может быть любая строка.

Синтаксис:

<element data-* = "value">

Поддержка браузерами и значения атрибута

Значение	Chrome	Firefox	Opera	Safari	IExplorer	Edge
value	4.0	2.0	9.6	3.1	5.5	12.0

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Название документа </title>
</head>
<body>
<p id = "test">Нажми кнопку, чтобы изменить параграф.</p>
<script>
function showDetails(test) {
var testType = test.getAttribute("data-test");
alert(test.innerHTML + " это " + testType + "."); 
}
</script>
<ul>
<li onclick = "showDetails(this)"data-test = "звезда">Солнце</li>
<li onclick = "showDetails(this)"data-test = "спутник">Ио</li>
<li onclick = "showDetails(this)"data-test = "планета">Меркурий</li>
</ul>
</body>
</html>

Кликни по элементу для подробной информации:

Солнце
Ио
Меркурий

Глобальные атрибуты