Від автора: у цій статті я покажу вам, як використовувати 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-атрибути можна використовувати для зберігання і відображення користувачам інших даних. Наприклад, повідомлення про непрочитані повідомлення і т. д.
