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

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

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

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

Очень часто нам приходится хранить информацию, связанную с различными DOM-элементами. Для пользователей эта информация может быть несущественной, однако простой доступ к ней сильно упростит жизнь для нас с вами, разработчиков.

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

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

каждый новый кусок информации потребует добавления отдельного класса, что усложняет парсинг данных в JS;

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

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

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

Синтаксис HTML

Как я уже упомянул ранее, data-атрибуты начинаются на data-. Пример:

<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-атрибутов (с помощью тултипа, например).

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

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

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

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

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

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

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

<span data-tooltip="A simple explanation">Word</span>

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

span::before {
  content: attr(data-tooltip);
  // Другие стили
}

span:hover::before {
  display: inline-block;
}

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее

Методы 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-код:

<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName">
  Salad King
</li>

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

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

<li id="salad" data-type="veg" data-distance="2miles" data-identifier="10318">
  Salad King
</li>

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

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

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree