Що таке атрибути даних (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. Крім створення спливаючих підказок і стилізації елементів за допомогою селекторів атрибутів, ви можете використовувати атрибути даних для зберігання і відображення користувачам різних даних, таких як повідомлення про непрочитані повідомлення та маси інших.
Дякуємо, що читаєте нас!
Останні пости
Як вибрати ідеальний ноутбук: Повний гайд
Вибір ноутбука може бути складним завданням у світі, де ринок переповнений варіантами на будь-який смак… Читати далі
Томас Едісон
Наш великий недолік в тому, що ми занадто швидко опускаємо руки. Найбільш діючий метод досягти… Читати далі
Найкрасивіші та найбільш вражаючі мости з усього світу (ТОП-10)
Міст — це щось більше, ніж просто споруда, яка поєднує два береги. Для того, щоб… Читати далі
Соломон
Життя нас вчить, що свою пару ми пізнаємо, коли розлучаємося, своїх братів ми пізнаємо, коли… Читати далі
Річард Бах
Жодне бажання не дається тобі окремо від сили, що дозволяє його здійснити. Хоча, можливо, для… Читати далі