От автора: в этой статье я покажу вам, как использовать HTML5 data-атрибуты. Также я расскажу вам, где их можно применить в реальной работе.
Почему именно пользовательские data-атрибуты?
Очень часто нам приходится хранить информацию, связанную с различными DOM-элементами. Для пользователей эта информация может быть несущественной, однако простой доступ к ней сильно упростит жизнь для нас с вами, разработчиков.
Например, у вас на странице показан список ресторанов. До HTML5 для хранения информации о еде в ресторане, а также о расстоянии до него от посетителя вы могли воспользоваться атрибутом class. А что если вам также нужно хранить id ресторана, чтобы знать, в какой конкретный ресторан пользователь собирается пойти?
С подходом на HTML-классах связано несколько проблем:
атрибут class не предназначен для хранения такой информации, его основная задача – позволять разработчику назначать стили на набор элементов;
каждый новый кусок информации потребует добавления отдельного класса, что усложняет парсинг данных в JS;
скажем, какой-то класс начинается с чисел. Если позже вы захотите стилизовать элементы с помощью такого класса, то вам придется либо отказаться от чисел, либо использовать селекторы атрибутов.
Чтобы избавиться от этих проблем, в HTML5 были представлены пользовательские data-атрибуты. Все атрибуты на элементе, начинающиеся на data- являются data-атрибутами. С их помощью также можно стилизовать элементы.
Теперь давайте изучим основы data-атрибутов и узнаем, как получить их значения в CSS и JS.
Синтаксис HTML
Как я уже упомянул ранее, data-атрибуты начинаются на data-. Пример:
1 2 3 |
<li data-type="veg" data-distance="2miles" data-identifier="10318"> Salad King </li> |
Теперь эти data-атрибуты можно использовать для поиска и сортировки ресторанов для посетителей. Например, можно отобразить только вегетарианские рестораны в определенном радиусе.
Помимо префикса data- в именах пользовательских data-атрибутов могут встречаться буквы, цифры, тире (-), точка (.), двоеточие (:) и нижнее подчеркивание (_). Заглавных букв в имени быть не должно.
При использовании data-атрибутов необходимо помнить о двух вещах.
Первое, тип хранимых в атрибуте данных должен быть string (строка). Также в data-атрибуте могут храниться любые данные, которые можно перекодировать в строку. Преобразования типов должны выполняться в JS.
Второе, data-атрибуты необходимо использовать только в крайнем случае, если ни один другой HTML-элемент или атрибут не подходит. Например, нельзя хранить класс элемента в атрибуте data-class.
У одного элемента может быть сколько угодно много data-атрибутов с самыми различными значениями.
Data-атрибуты и CSS
Data-атрибуты в CSS можно использовать для стилизации элементов с помощью селекторов атрибутов. Также с помощью функции attr() можно показывать пользователям информацию из data-атрибутов (с помощью тултипа, например).
Стилизация элементов
Возвращаемся к нашему примеру с ресторанами. Вы можете дать подсказку пользователям о типе ресторана или расстоянии до него с помощью селекторов атрибутов. С их помощью можно задать разные фоны ресторанам, пример:
1 2 3 4 5 6 7 |
li[data-type='veg'] { background: #8BC34A; } li[data-type='french'] { background: #3F51B5; } |
Создание тултипов
С помощью тултипов пользователям можно показывать дополнительную информацию об элементе.
Рекомендую использовать этот метод для быстрых прототипов, а не в продакшене, так как тултипы на чистом CSS не полностью доступны.
Информацию, которую вы хотите показать, можно хранить в атрибуте data-tooltip.
1 |
<span data-tooltip="A simple explanation">Word</span> |
Представить данные пользователю можно с помощью псевдоэлемента ::before.
1 2 3 4 5 6 7 8 |
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 или пустую строку, если атрибут не существует. Пример использования методов:
1 2 |
var restaurant = document.getElementById("restaurantId"); var ratings = restaurant.getAttribute("data-ratings"); |
С помощью метода setAttribute можно изменять существующие значения, а также добавлять новые атрибуты.
1 |
restaurant.setAttribute("data-owner-name", "someName"); |
Свойство dataset
Более простой способ получить доступ к data-атрибутам – с помощью свойства dataset. Это свойство возвращает объект DOMStringMap с одной записью для каждого data-атрибута.
При использовании свойства dataset необходимо помнить о нескольких вещах.
Трансформация пользовательского data-атрибута в ключ DOMStringMap проходит в три этапа:
из имени атрибута удаляется префикс data-;
любой дефис, за которым следует буква нижнего регистра, удаляется из имени, а следующая за ним буква переводится в верхний регистр;
остальные символы не меняются. Все дефисы, после которых не идет буква в нижнем регистре, также остаются.
Получить доступ к атрибутам можно с помощью имени в верблюжьем регистре, которое хранится в объекте в виде ключа. Например, вот так: element.dataset.keyname.
Другой способ получить доступ к атрибутам – использовать квадратные скобки, вот так: element.dataset[keyname].
Разберем следующий HTML-код:
1 2 3 |
<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName"> Salad King </li> |
Пара примеров:
1 2 3 4 5 6 7 |
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-атрибутам необходимо было писать следующий код:
1 2 3 4 |
var restaurant = $("#restaurantId"); var owner = restaurant.data("owner-name"); restaurant.data("owner-name", "newName"); |
С версии 1,6 jQuery перешел на верблюжий регистр в data-атрибутах. Теперь код сверху можно переписать следующим образом:
1 2 3 4 |
var restaurant = $("#restaurantId"); var owner = restaurant.data("ownerName"); restaurant.data("ownerName", "newName"); |
Также вы должны знать, что jQuery самостоятельно пытается конвертировать строку, полученную из data-атрибута в подходящий тип. Например, числовой, Булев, объект, массив или null.
1 2 3 4 5 |
var restaurant = $("#restaurantId"); var identifier = restaurant.data("identifier"); console.log(typeof identifier); // number |
Если необходимо получить значение атрибута в виде строки, и чтобы jQuery не пробовал его конвертировать в другой тип, воспользуйтесь jQuery-методом attr().
jQuery извлекает значение data-атрибутов только один раз при первом доступе. Потом data-атрибуты не доступны и не изменяются. Все вносимые в атрибуты изменения применяются только в рамках jQuery и доступны только в нем.
Например, вам нужно что-то изменить в data-атрибутах следующего элемента списка:
1 2 3 |
<li id="salad" data-type="veg" data-distance="2miles" data-identifier="10318"> Salad King </li> |
Для изменения атрибута data-distance можно использовать код ниже:
1 2 3 4 5 6 7 8 9 10 |
var distance = $("#salad").data("distance"); console.log(distance); // "2miles" $("#salad").data("distance","1.5miles"); console.log(distance); // "1.5miles" document.getElementById("salad").dataset.distance; // "2miles" |
Как видите, при получении значения атрибута data-distance с помощью обычного JS (не jQuery) отображается старое значение.
Заключение
В этом уроке я рассказал все, что нужно знать о HTML5 data-атрибутах. Помимо создания тултипов и стилизации элементов с помощью селекторов атрибутов data-атрибуты можно использовать для хранения и отображения пользователям других данных. Например, уведомления о непрочитанных сообщениях и т.д.
Автор: Gajendar Singh
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.