Що таке атрибути даних (data) в HTML5 і як їх використовувати

Сьогоднішня стаття присвячена розгляду нововведення в HTML5 – користувацьких атрибутів даних (data). Ви дізнаєтеся, що таке атрибути data, навіщо вони потрібні, і як їх можна використовувати.

Навіщо потрібні атрибути даних?

Дуже часто розробникам потрібно зберігати певну інформацію, пов’язану з різними елементами DOM. Найчастіше така інформація більше потрібна саме програмістам, а не відвідувачам сайту. Припустимо, вам потрібно визначати тип блоку DOM (section, footer і т.д.) і привласнювати йому ідентифікатор, щоб пізніше додавати до нього певні CSS стилі.

Це легко можна зробити і за допомогою атрибутів id або class. Але, іноді, такого рішення мало. З огляду на наступні обмеження:

Атрибут class не призначений для зберігання розширених даних. Його основна мета – привласнювати CSS стилі певному набору елементів.
Якщо нам потрібен додатковий обсяг інформації, ми змушені додавати новий клас до елементу. Це може ускладнювати синтаксичний аналіз даних в JavaScript.
Якщо ім’я класу починається з цифр, пізніше це ускладнить присвоєння стилів, оскільки доведеться або екранувати числа, або використовувати інші селектори атрибутів в таблиці стилів.

Щоб вирішити ці завдання, в HTML5 були введені атрибути даних. Всі атрибути елемента, назва якого починається з data-, є атрибутами даних. Ці атрибути даних можна використовувати і для присвоєння стилів елементам DOM.

Синтаксис користувальницьких атрибутів даних в HTML5

Назва атрибута даних завжди починається з data-. Наприклад:

<div data-element-type="section" data-nonce="bfc9a753f7" data-id="25018">
  Section
</div>

Крім префікса data-, назва допустимого користувацького атрибуту даних може містити тільки латинські букви, цифри, дефіс (–), крапку (.), двокрапку (:) або підкреслення (_). Для назви не можна використовувати великі літери.

Зауваження щодо використання атрибутів даних:

По-перше, дані, що зберігаються в цих атрибутах, повинні мати тип string. Все, що може бути закодовано у вигляді рядка, також може зберігатися в атрибутах даних. Якщо потрібно виконати перетворення типів, використовуйте для цього JavaScript.
По-друге, атрибути даних повинні використовуватися тільки тоді, коли немає інших відповідних HTML-елементів або атрибутів. Наприклад, недоречно зберігати клас елемента в атрибуті data-class.
По-третє, елемент може містити будь-яку кількість атрибутів даних з будь-яким допустимим значенням.

Тепер давайте перейдемо до розгляду практичного застосування атрибутів даних і дізнаємося, як отримати доступ до їх значень в CSS і JavaScript.

Доступ до атрибутів даних в CSS

Ви можете використовувати атрибути даних в CSS для стилізації елементів за допомогою селекторів атрибутів. Ви також можете показати інформацію, що зберігається в атрибуті даних, користувачам (в підказці або іншим способом) за допомогою функції attr() jQuery.

Якщо взяти приклад з типами блоків, ви можете по-різному стилізувати їх фоновий колір. Приклад селектора в CSS:

div[data-element-type='section'] {
  background: #ccc;
}

Створення спливаючих підказок з атрибутом data

Ви можете використовувати спливаючі підказки, щоб показати користувачам деяку додаткову інформацію, пов’язану з елементом. Інформація, яку ви хочете показати, може зберігатися в атрибуті data-tooltip.

<span data-tooltip="Приклад підказки (tooltip)">Підказка</span>

Потім ви можете показувати ці дані користувачеві з допомогою псевдоелемента ::before.

span.tooltip::before {
 content: attr(data-tooltip);
 position: absolute;
 top: 25px;
 font-size: 15px;
 display: none;
}
span.tooltip:hover::before {
 display: inline-block;
}

Доступ до атрибутів даних за допомогою JavaScript

Ви можете отримати доступ до атрибутів даних в JavaScript за допомогою різних способів.

Спосіб №1: Використання getAttribute і setAttribute

Метод getAttribute повертає або пусте значення (null), або порожній рядок, якщо даний атрибут не існує. Ось приклад використання цього методу:

var element = document.getElementById("some-block");
var blockType = element.getAttribute("data-element-type");

Ви можете використовувати метод setAttribute, щоб змінити значення існуючих атрибутів або додати нові атрибути.

element.setAttribute("data-id", "newId");

Спосіб №2: Використання jQuery

Ви також можете використовувати метод jQuery data() для доступу до атрибутів даних елемента. До версії jQuery 1.6 використовувався наступний код для доступу до атрибутів даних:

var element = $("#some-block");
var blockType = element.data("element-type");
element.data("element-type", "newData");

Починаючи з версії jQuery 1.6 використовується версія атрибутів даних у форматі camelCase (ВерблюжийРегістр). Тепер ви можете зробити те ж саме, використовуючи наступний код:

var element = $("#some-block");
var blockType = element.data("elementType");
element.data("elementType", "newData");

Короткий підсумок

У сьогоднішній статті ми розглянули основні моменти, які вам потрібно знати про атрибути даних (data-) в HTML5. Крім створення спливаючих підказок і стилізації елементів за допомогою селекторів атрибутів, ви можете використовувати атрибути даних для зберігання і відображення користувачам різних даних, таких як повідомлення про непрочитані повідомлення та маси інших.

Дякуємо, що читаєте нас!

Теги: HTML5