Что такое пользовательские атрибуты данных (data) в HTML5 и как их использовать

17/07/2019 Обновлено: 22.07.2019

Сегодняшняя статья посвящена рассмотрению новшества в HTML5 – пользовательских атрибутов данных (data). Вы узнаете, что такое атрибуты data, зачем они нужны, и как их можно использовать.

Зачем нужны пользовательские атрибуты данных?

Очень часто разработчикам нужно хранить определенную информацию, связанную с различными элементами DOM. Зачастую такая информация больше нужна именно программистам, а не посетителям сайта. Допустим, вам нужно определять тип блока DOM (section, footer и т.д.) и присваивать ему идентификатор, чтобы позднее добавлять к нему определенные CSS стили.

Это легко можно сделать и с помощью атрибутов id или class. Но, иногда, такого решения мало. Ввиду следующих ограничений:

Атрибут class не предназначен для хранения расширенных данных. Его основная цель – присваивать CSS стили определенному набору элементов.
Если нам нужен дополнительный объем информации, мы вынуждены добавлять новый класс к элементу. Это может затруднять синтаксический анализ данных в JavaScript.
Если имя класса начинается с цифр, позже это затруднит присвоение стилей, поскольку придется либо экранировать числа, либо использовать другие селекторы атрибутов в таблице стилей.

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

Синтаксис пользовательских атрибутов данных в HTML5

Название атрибута данных всегда начинается с data-. Например:

<div data-element-type="section" data-nonce="bfc9a753f7" data-id="25018">
  Section
</div>

Помимо префикса data-, название допустимого пользовательского атрибута данных может содержать только латинские буквы, цифры, дефис (—), точку (.), двоеточие (:) или подчеркивание (_). Для названия нельзя использовать заглавные буквы.

Замечания по использованию атрибутов данных:

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

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

Доступ к атрибутам данных в CSS

Вы можете использовать атрибуты данных в CSS для стилизации элементов с помощью селекторов атрибутов. Вы также можете показать информацию, хранящуюся в атрибуте данных, пользователям (во всплывающей подсказке или другим способом) с помощью функции attr() jQuery.

Если взять пример с типами блоков, вы можете по-разному стилизовать их фоновый цвет. Пример селектора в CSS:

div[data-element-type='section'] {
  background: #ccc;
}

Создание всплывающих подсказок с атрибутом data

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

<span data-tooltip="Пример подсказки (tooltip)">Подсказка</span>

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

span.tooltip::before {
 content: attr(data-tooltip);
 position: absolute;
 top: 25px;
 font-size: 15px;
 display: none;
}
span.tooltip:hover::before {
 display: inline-block;
}

Доступ к атрибутам данных с помощью JavaScript

Вы можете получить доступ к атрибутам данных в JavaScript с помощью различных способов.

Способ №1: Использование getAttribute и setAttribute

Метод getAttribute возвращает либо пустое значение (null), либо пустую строку, если данный атрибут не существует. Вот пример использования этого метода:

var element = document.getElementById("some-block");
var blockType = element.getAttribute("data-element-type");

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

element.setAttribute("data-id", "newId");

Способ №2: Использование jQuery

Вы также можете использовать метод jQuery data() для доступа к атрибутам данных элемента. До версии jQuery 1.6 использовался следующий код для доступа к атрибутам данных:

var element = $("#some-block");
var blockType = element.data("element-type");
element.data("element-type", "newData");

Начиная с версии jQuery 1.6 используется версия атрибутов данных в формате camelCase (ВерблюжийРегистр). Теперь вы можете сделать то же самое, используя следующий код:

var element = $("#some-block");
var blockType = element.data("elementType");
element.data("elementType", "newData");

Краткий итог

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

Спасибо, что читаете нас!

Теги: HTML5