Атрибуты data-* используются для хранения пользовательских данных, принадлежащих только странице или приложению.
Атрибут data-* - синтаксис и код
Пример использования атрибут data-* для внедрения пользовательских данных:
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
let animalType = animal.getAttribute("data-animal-type");
alert(" " + animal.innerHTML + " это " + animalType + ".");}
</script>
</head>
<body>
<h1>Разновидность</h1>
<p>Нажмите на вид, чтобы узнать, к какому типу он относится:</p>
<ul>
<li onclick="showDetails(this)" id="crow" data-animal-type="птица">Ворон</li>
<li onclick="showDetails(this)" id="carp" data-animal-type="рыба">Карп</li>
<li onclick="showDetails(this)" id="karakurt" data-animal-type="паук">Каракурт</li>
</ul>
</body>
</html>
Разновидность
Нажмите на вид, чтобы узнать, к какому типу он относится:
Синтаксис
<element contenteditable="true|false">
Определение и использование
Атрибуты data-* дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.
Сохраненные (пользовательские) данные затем можно использовать в JavaScript страницы для создания более интересного пользовательского опыта (без каких-либо вызовов Ajax или запросов к базе данных на стороне сервера).
Атрибуты data-* состоят из двух частей:
- Имя атрибута не должно содержать заглавных букв и должно быть как минимум на один символ длиннее префикса "
data-";
- Значение атрибута может быть любой строкой.
★ Примечание: пользовательские атрибуты с префиксом "data-" будут полностью игнорироваться пользовательским агентом.
Поддержка data-* браузерами
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
Значения атрибутов
| Значение |
Описание |
| somevalue |
Указывает значение атрибута (в виде строки)
|
Связанные страницы
Руководство по HTML: атрибуты HTML
Полный список всех доступных глобальных атрибутов HTML см. в Справочнике - Глобальные атрибуты HTML.
