data
Дозволяє створювати свої атрибути для зберігання довільної інформації. Дані можуть бути отримані за допомогою скриптів або через стильову функцію attr().
Ім'я атрибута має обов'язково починатися з data-, далі можна використовувати латинські літери в нижньому регістрі, цифри та такі символи: дефіс (-), двокрапка (:), підкреслення (_).
Імена атрибутів трансформуються у змінні, до яких надалі можна звертатися й отримувати значення, за такими правилами:
data- видаляється;
будь-який дефіс, що йде перед буквою, видаляється, а буква за ним стає великою;
будь-які інші літери залишаються незмінними.
Наприклад, атрибут data-date-of-birth перетворюється на змінну dateOfBirth.
Для звернення до атрибутів і отримання їхніх значень через скрипти застосовується метод dataset. Він же використовується і для встановлення нового значення.
<i>значення</i> = <i>елемент</i>.dataset.<i>атрибут</i>
<i>елемент</i>.dataset.<i>атрибут</i> = <i>значение</i>Тут ім'я атрибута - це змінна, отримана шляхом зміни атрибута за вищенаведеними правилами (dateOfBirth, а не data-date-of-birth або date-of-birth)
📋 Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>data-*</title>
</head>
<body>
<div id="user" data-id="1234567890"
data-user="Vasya Pupkin"
data-date-of-birth="04/01/1990">User</div>
<script>
var el = document.getElementById('user');
id = el.dataset.id; // Get the value of the data-id attribute
user = el.dataset.user;
dob = el.dataset.dateOfBirth; // Get the value of the data-date-of-birth attribute
el.dataset.ban = 'No'; // Assign a new data-ban attribute and its value
console log(user); // Print the value of the user variable to the console
console log(dob); // Print the value of the dob variable to the console
</script>
</body>
</html>