Полное руководство по атрибутам данных

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; // 123span.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 Coyierconsole.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(Первоначальное определение).

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

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

Десктопные

Chrome Firefox IE Edge Safari
7 6 11 12 5.1

Мобильные

Android Chrome Android Firefox Android iOS Safari
80 68 3 5.0-5.1

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

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