Від автора: у цій статті я покажу вам, як використовувати HTML5 data-атрибути. Також я розповім вам, де їх можна застосувати в реальній роботі.
Чому саме користувальницькі data-атрибути?
Дуже часто нам доводиться зберігати інформацію, пов’язану з різними DOM-елементами. Для користувачів ця інформація може бути несуттєвою, проте простий доступ до неї сильно спростить життя для нас з вами, розробників.
Наприклад, у вас на сторінці показано список ресторанів. До HTML5 для зберігання інформації про їжу в ресторані, а також про відстані до нього від відвідувача ви могли скористатися атрибутом class. А що якщо вам також потрібно зберігати id ресторану, щоб знати, в який конкретний ресторан користувач збирається піти?
З підходом на HTML-класах пов’язано кілька проблем:
атрибут class не призначений для зберігання такої інформації, його основне завдання – дозволяти розробнику призначати стилі на набір елементів;
кожен новий шматок інформації потребує додавання окремого класу, що ускладнює парсинг даних в JS;
скажімо, якийсь клас починається з чисел. Якщо пізніше ви захочете стилізувати елементи з допомогою такого класу, то вам доведеться або відмовитися від чисел, або використовувати селектори атрибутів.
Щоб позбутися від цих проблем, в HTML5 були представлені користувальницькі data-атрибути. Всі атрибути на елементі, що починаються на data – є data-атрибутами. З їх допомогою також можна стилізувати елементи.
Тепер давайте вивчимо основи data-атрибутів і дізнаємося, як отримати їх значення в CSS і JS.
Синтаксис HTML
Як я вже згадував раніше, data-атрибути починаються на data-. Приклад:
Тепер ці data-атрибути можна використовувати для пошуку і сортування ресторанів для відвідувачів. Наприклад, можна відобразити тільки вегетаріанські ресторани в певному радіусі.
Крім префікса data – в іменах користувальницьких data-атрибутів можуть зустрічатися літери, цифри, тире (-), крапка (.), двокрапка (:) і нижнє підкреслення (_). Заголовних букв в імені бути не повинно.
При використанні data-атрибутів необхідно пам’ятати про дві речі.
Перше, тип зберігаються в атрибуті даних повинен бути string (рядок). Також в data-атрибуті можуть зберігатися будь-які дані, які можна перекодувати в рядок. Перетворення типів повинні виконуватися в JS.
Друге, data-атрибути необхідно використовувати тільки в крайньому випадку, якщо жоден інший HTML-елемент або атрибут не підходить. Наприклад, не можна зберігати клас елемента в атрибуті data-class.
У одного елемента може бути скільки завгодно багато data-атрибутів із самими різними значеннями.
Data-атрибути CSS
Data-атрибути CSS можна використовувати для стилізації елементів з допомогою селекторів атрибутів. Також за допомогою функції attr() можна показувати користувачам інформацію з data-атрибутів (з допомогою зринаючі підказки, наприклад).
Стилізація елементів
Повертаємося до нашого прикладу з ресторанами. Ви можете дати підказку користувачам про тип ресторану або відстані до нього з допомогою селекторів атрибутів. З їх допомогою можна задати різні фони ресторанам, приклад:
li[data type=’veg’] {
background: #8BC34A;
}
li[data type=’french’] {
background: #3F51B5;
}
Створення тултипов
З допомогою тултипов користувачам можна показувати додаткову інформацію про елемент.
Рекомендую використовувати цей метод для швидких прототипів, а не в продакшені, так як зринаючі підказки. на чистому CSS не повністю доступні.
Інформацію, яку ви хочете показати, можна зберігати в атрибуті data-tooltip.
Word
Представити дані користувача можна за допомогою псевдоэлемента ::before.
span::before {
content: attr(data-tooltip);
// Інші стилі
}
span:hover::before {
display: inline-block;
}
Отримання доступу до data-атрибутів в JS
Існує 3 способи отримати доступ до data-атрибутів в JS.
Методи getAttribute і setAttribute
За допомогою методів getAttribute() і setAttribute() в JS можна отримувати та встановлювати значення data-атрибутів.
Метод getAttribute поверне null або порожній рядок, якщо атрибут не існує. Приклад використання методів:
var restaurant = document.getElementById(“restaurantId”);
var ratings = restaurant.getAttribute(“data-ratings”);
За допомогою методу setAttribute можна змінювати існуючі значення, а також додавати нові атрибути.
restaurant.setAttribute(“data-owner-name”, “someName”);
Властивість dataset
Більш простий спосіб отримати доступ до data-атрибутах – з допомогою властивості dataset. Це властивість повертає об’єкт DOMStringMap з одним записом для кожного data-атрибуту.
При використанні властивості dataset необхідно пам’ятати про декілька речей.
Трансформація користувальницького data-атрибута ключ DOMStringMap проходить в три етапи:
з імені атрибута видаляється префікс data;
будь дефіс, за яким слідує буква нижнього регістра, видаляється з імені, а наступна за нею буква переводиться у верхній регістр;
інші символи не змінюються. Всі тире, після яких не йде літера в нижньому регістрі, також залишаються.
Отримати доступ до атрибутів можна за допомогою імені в верблюжьем регістрі, яке зберігається в об’єкті у вигляді ключа. Наприклад, ось так: element.dataset.keyname.
Інший спосіб отримати доступ до атрибутів – використовувати квадратні дужки, ось так: element.dataset[keyname].
Розберемо наступний HTML-код:
Пара прикладів:
var restaurant = document.getElementById(“restaurantId”);
var ratings = restaurant.dataset.ratings;
restaurant.dataset.ratings = newRating;
var owner = restaurant.dataset[‘ownerName’];
restaurant.dataset[‘ownerName’] = ‘newOwner’;
Цей метод в даний час підтримується у всіх основних браузерах, використовуйте його для доступу до користувальницьким data-атрибутами, а не попередній спосіб.
За допомогою jQuery
Також отримати доступ до data-атрибутів можна через jQuery-метод data(). До jQuery 1,6 для доступу до data-атрибутів необхідно було писати наступний код:
var restaurant = $(“#restaurantId”);
var owner = restaurant.data(“owner-name”);
restaurant.data(“owner-name”, “newName”);
З версії 1,6 jQuery перейшов на верблюжий регістр в data-атрибутах. Тепер код зверху можна переписати наступним чином:
var restaurant = $(“#restaurantId”);
var owner = restaurant.data(“ownerName”);
restaurant.data(“ownerName”, “newName”);
Також ви повинні знати, що jQuery самостійно намагається конвертувати рядок, отриману з data-атрибута відповідний тип. Наприклад, числовий, Булев, об’єкт, масив або null.
var restaurant = $(“#restaurantId”);
var identifier = restaurant.data(“identifier”);
console.log(typeof identifier);
// number
Якщо необхідно отримати значення атрибута у вигляді рядка, і щоб jQuery не пробував його конвертувати в інший тип, скористайтесь jQuery-методом attr().
jQuery витягує значення data-атрибутів тільки один раз при першому доступі. Потім data-атрибути не доступні і не змінюються. Усі внесені в атрибути зміни застосовуються тільки в рамках jQuery і доступні тільки в ньому.
Наприклад, вам потрібно щось змінити в data-атрибутах наступного елемента списку:
Для зміни атрибута data-distance можна використовувати наступний код:
var distance = $(“#salad”).data(“distance”);
console.log(distance);
// “2miles”
$(“#salad”).data(“distance”,”1.5 miles”);
console.log(distance);
// “1.5 miles”
document.getElementById(“салат”).dataset.distance;
// “2miles”
Як бачите, при отриманні значення атрибута data-distance з допомогою звичайного JS (не jQuery) відображається старе значення.
Висновок
У цьому уроці я розповів усе, що потрібно знати про HTML5 data-атрибутах. Крім створення тултипов і стилізації елементів з допомогою селекторів атрибутів data-атрибути можна використовувати для зберігання і відображення користувачам інших даних. Наприклад, повідомлення про непрочитані повідомлення і т. д.
