Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 02.12.2022)
90090
осіб
280
літаків
262
гелікоптерів
2916
танків
5883
ББМ
1905
артилерія
210
ППО
395
РСЗВ
4464
машин
16
кораблі і катери
Що таке атрибути даних (data) в HTML5 і як їх використовувати

Що таке атрибути даних (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. Крім створення спливаючих підказок і стилізації елементів за допомогою селекторів атрибутів, ви можете використовувати атрибути даних для зберігання і відображення користувачам різних даних, таких як повідомлення про непрочитані повідомлення та маси інших.

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.