Как и зачем использовать пользовательские data-атрибуты в HTML5?

Как и зачем использовать пользовательские data-атрибуты в HTML5?

От автора: в этой статье я покажу вам, как использовать 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-атрибутов (с помощью тултипа, например).

Стилизация элементов

Возвращаемся к нашему примеру с ресторанами. Вы можете дать подсказку пользователям о типе ресторана или расстоянии до него с помощью селекторов атрибутов. С их помощью можно задать разные фоны ресторанам, пример:

Создание тултипов

С помощью тултипов пользователям можно показывать дополнительную информацию об элементе.

Рекомендую использовать этот метод для быстрых прототипов, а не в продакшене, так как тултипы на чистом CSS не полностью доступны.

Информацию, которую вы хотите показать, можно хранить в атрибуте data-tooltip.

Представить данные пользователю можно с помощью псевдоэлемента ::before.

Получение доступа к data-атрибутам в JS

Существует 3 способа получить доступ к data-атрибутам в JS.

Методы getAttribute и setAttribute

С помощью методов getAttribute() и setAttribute() в JS можно получать и устанавливать значения data-атрибутов.

Метод getAttribute вернет null или пустую строку, если атрибут не существует. Пример использования методов:

С помощью метода setAttribute можно изменять существующие значения, а также добавлять новые атрибуты.

Свойство dataset

Более простой способ получить доступ к data-атрибутам – с помощью свойства dataset. Это свойство возвращает объект DOMStringMap с одной записью для каждого data-атрибута.

При использовании свойства dataset необходимо помнить о нескольких вещах.

Трансформация пользовательского data-атрибута в ключ DOMStringMap проходит в три этапа:

из имени атрибута удаляется префикс data-;

любой дефис, за которым следует буква нижнего регистра, удаляется из имени, а следующая за ним буква переводится в верхний регистр;

остальные символы не меняются. Все дефисы, после которых не идет буква в нижнем регистре, также остаются.

Получить доступ к атрибутам можно с помощью имени в верблюжьем регистре, которое хранится в объекте в виде ключа. Например, вот так: element.dataset.keyname.

Другой способ получить доступ к атрибутам – использовать квадратные скобки, вот так: element.dataset[keyname].

Разберем следующий HTML-код:

Пара примеров:

Этот метод в настоящее время поддерживается во всех основных браузерах, используйте его для доступа к пользовательским data-атрибутам, а не предыдущий способ.

С помощью jQuery

Также получить доступ к data-атрибутам можно через jQuery-метод data(). До jQuery 1,6 для доступа к data-атрибутам необходимо было писать следующий код:

С версии 1,6 jQuery перешел на верблюжий регистр в data-атрибутах. Теперь код сверху можно переписать следующим образом:

Также вы должны знать, что jQuery самостоятельно пытается конвертировать строку, полученную из data-атрибута в подходящий тип. Например, числовой, Булев, объект, массив или null.

Если необходимо получить значение атрибута в виде строки, и чтобы jQuery не пробовал его конвертировать в другой тип, воспользуйтесь jQuery-методом attr().

jQuery извлекает значение data-атрибутов только один раз при первом доступе. Потом data-атрибуты не доступны и не изменяются. Все вносимые в атрибуты изменения применяются только в рамках jQuery и доступны только в нем.

Например, вам нужно что-то изменить в data-атрибутах следующего элемента списка:

Для изменения атрибута data-distance можно использовать код ниже:

Как видите, при получении значения атрибута data-distance с помощью обычного JS (не jQuery) отображается старое значение.

Заключение

В этом уроке я рассказал все, что нужно знать о HTML5 data-атрибутах. Помимо создания тултипов и стилизации элементов с помощью селекторов атрибутов data-атрибуты можно использовать для хранения и отображения пользователям других данных. Например, уведомления о непрочитанных сообщениях и т.д.

Автор: Gajendar Singh

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: