Всем привет! В этой небольшой статье рассмотрим, как задавать свои собственные атрибуты с помощью data-* .
Всем привет! В этой небольшой статье рассмотрим, как задавать свои собственные атрибуты с помощью data-*.
В HTML5 появилась возможность задать любой атрибут с помощью data-*. Их можно применить к любому элементу на странице, а задаются они в формате data-любое_имя.
<html>
<head>
<title>data-*</title>
<meta charset="utf-8">
</head>
<body>
<span data-title="Подсказка" id="test">Какой-то текст</span>
</body>
</html>
Для чего это нужно? Применение очень обширное. Например, в нашем примере мы задали атрибут data-title со значением "Подсказка". Дальше мы можем с помощью скрипта выбрать это значение и выводить его при наведении на текст.
var el = document.getElementById("test");
var text = el.getAttribute("data-title");
alert(text);
Также данный атрибут можно использовать, чтобы стилизовать элементы.
<div data-name="myname"></div>
<style>
div[data-name=myname] {
width: 100px;
height: 100px;
background: green;
}
</style>
Но обычно его используют для хранения какой-то информации. Т.к. значение может быть любым, то мы можем, например, получить JSON строку и записать её в наш атрибут, а потом её как-нибудь использовать.
Вещь на самом деле полезная и, думаю, применение ей вы сможете найти.
