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

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

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

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

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

Синтаксис:

<element data-* = "value">

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

ЗначениеChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
value4.02.09.63.15.512.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>

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

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