Что такое атрибуты данных?

Что такое атрибуты?

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

<!—- Мы можем использовать `class` для стилей в CSS. Но также мы обозначили блок как относящийся к географическому региону -->
<div class="names" role="region" aria-label="Names"></div>

Не рекомендуется создавать собственные атрибуты или применять существующие для несвязанных функций.

<!-- `highlight` не атрибут HTML -->
<div highlight="true"></div>
<!-- `large` не является допустимым значением атрибута `width` -->
<div width="large">

Из-за этого снижается валидность кода.

Синтаксис

Пользовательские атрибуты HTML позволяют размещать в них свою собственную информацию. Вот пример:

<!—- Значение задавать не обязательно -->
<div data-foo></div>
<!-- ...но оно может быть -->
<div data-size="large"></div>
<!-- Вы внутри HTML-разметки, поэтому экранируйте спецсимволы -->
<li data-prefix="Внимательнее с кодом HTML здесь."><li>
<!-- Если хотите, можно продолжить это имя дальше -->
<aside data-some-long-attribute-name><aside>

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

Можно ли использовать только атрибут data?

<div data=""></div>

Это, скорее всего, не повлияет на работоспособность кода. Но вы не сможете использовать API JavaScript, о котором мы расскажем позже.

Чего нельзя делать с атрибутами данных?

Если контент должен быть виден на странице, помещайте его не только в атрибуты данных, но и в содержимое блоков.

<!-- Эта информация не видна на странице -->
<div data-name="Chris Coyier"></div>
<!-- Если нужен программный доступ к блоку, который не должен быть виден, используйте другие способы... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Стилизация с помощью атрибутов данных

С помощью CSS можно выбирать HTML-элементы на основе атрибутов и их значений.

/* Выбираем все элементы с таким атрибутом и значением */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}
/* Вы можете ограничить выбор отдельными элементами или классами */
button[data-type="download"] { }
.card[data-pad="extra"] { }

При использовании атрибутов data-* вы получаете возможность использовать логику «включено/выключено», а также выбирать элементы на основе значения атрибута.

/* Выбор на основе присутствия атрибута */
[data-size] { }
/* Выбор на основе значения атрибута */
[data-state="open"],
[aria-expanded="true"] { }
/* Селектор выберет как "3", так и все значения, что начинается с этой цифры. Например "3.14" */
[data-version^="3"] { }
/* Селектор выберет атрибуты с указанным значением/
[data-company*="google"] { }

Специфика выбора атрибутов

Мы часто рассматриваем специфику применения стилей, как значение из четырех частей:

встроенные стили, идентификаторы, классы/атрибуты, теги.

Таким образом, селектор только атрибута выглядит как 0, 0, 1, 0. Приведенный ниже селектор:

div.card[data-foo="bar"] {}

... выглядит как 0, 0, 2, 1.
2, потому что имеется один класс (.card) и один атрибут ([data-foo="bar"]). 1 – потому что есть один тег (div).

Значения атрибутов без учета регистра

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

/* Будет соответствовать
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

Это строчная буква i внутри скобок.

Использование атрибутов данных для визуализации

CSS позволяет извлечь значение атрибута данных и отобразить его.

/* <div data-emoji="✅"> */
[data-emoji]::before {
  content: attr(data-emoji); /* вернет '✅' */
  margin-right: 5px;
}

Пример использования стиля

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

<div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

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

Можно получить доступ к значению атрибута с помощью универсального метода getAttribute().

let value = el.getAttribute("data-state");
// Вы также можете задавать значение
// Задаст data-state="collapsed"
el.setAttribute("data-state", "collapsed");

Но атрибуты данных также имеют собственный API. Допустим, что у вас есть элемент с несколькими атрибутами данных:

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon="️‍♀‍"
></span>

Если есть ссылка на этот элемент, вы можете устанавливать и получать такие атрибуты:

// Получение
span.dataset.info; // 123
span.dataset.index; // 2
// Установка
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = "";

Обратите внимание на использование camelCase в последней строке. API автоматически преобразует атрибуты кебаб-стиля в HTML.

Он также предоставляет доступ к встроенным наборам данных:

<img src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>

JSON внутри атрибутов данных

<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

А почему бы и нет? Это просто строка, и ее можно отформатировать как допустимый формат JSON. Вы можете восстановить эти данные и при необходимости проанализировать их.

const el = document.querySelector("li");
let json = el.dataset.person;
let data = JSON.parse(json);
console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

Сценарии использования JavaScript

Можно использовать атрибуты данных для помещения в HTML-код информации, которая может понадобиться JavaScript для выполнения определенных задач.

Допустим, что у вас есть кнопка «Мне нравится»:

<button data-id="435432343">♡</button>

У этой кнопки есть обработчик клика. Он выполняет Ajax-запрос к серверу, чтобы при клике увеличить количество лайков в базе данных. Он знает, какую запись обновлять, поскольку получает ее из атрибута данных.

Спецификации

• Selectors Level 4(В разработке).
• Selectors Level 3(Рекомендованная).
• Selectors Level 2, Revision 1(Первоначальное определение).

Поддержка браузерами

Число указывает на то, что браузер поддерживает функцию, начиная с этой версии.

Десктопные

Мобильные