Як і навіщо використовувати користувальницькі data-атрибути в HTML5?

23

Від автора: у цій статті я покажу вам, як використовувати HTML5 data-атрибути. Також я розповім вам, де їх можна застосувати в реальній роботі.

Чому саме користувальницькі data-атрибути?

Дуже часто нам доводиться зберігати інформацію, пов’язану з різними DOM-елементами. Для користувачів ця інформація може бути несуттєвою, проте простий доступ до неї сильно спростить життя для нас з вами, розробників.

Наприклад, у вас на сторінці показано список ресторанів. До HTML5 для зберігання інформації про їжу в ресторані, а також про відстані до нього від відвідувача ви могли скористатися атрибутом class. А що якщо вам також потрібно зберігати id ресторану, щоб знати, в який конкретний ресторан користувач збирається піти?

З підходом на HTML-класах пов’язано кілька проблем:

атрибут class не призначений для зберігання такої інформації, його основне завдання – дозволяти розробнику призначати стилі на набір елементів;

кожен новий шматок інформації потребує додавання окремого класу, що ускладнює парсинг даних в JS;

скажімо, якийсь клас починається з чисел. Якщо пізніше ви захочете стилізувати елементи з допомогою такого класу, то вам доведеться або відмовитися від чисел, або використовувати селектори атрибутів.

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

Тепер давайте вивчимо основи data-атрибутів і дізнаємося, як отримати їх значення в CSS і JS.

Синтаксис HTML

Як я вже згадував раніше, data-атрибути починаються на data-. Приклад:

  • Salad King
  • Тепер ці 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-код:

  • Salad King
  • Пара прикладів:

    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-атрибутах наступного елемента списку:

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