Data-атрибуты
Это — атрибуты, которые можно применять для удобного хранения в стандартных HTML-элементах различной полезной информации. Эта информация, в частности, может применяться в JavaScript и CSS.
HTML-элементы могут иметь атрибуты, которые используются для решения самых разных задач — от предоставления данных ассистивным технологиям, до стилизации элементов.
Главная возможность то, что по data атрибуту можно работать как по наличию этого атрибута, так и по значению этого атрибута и вытаскивать значения из этого атрибута.
Синтаксис
Возможность создавать собственные HTML-атрибуты и записывать в них данные может оказаться крайне полезной. Это, как вы понимаете, возможно благодаря атрибутам data-имя . Именно для этого такие атрибуты и предназначены.
Эти атрибуты, именно из-за того, что они всегда начинаются с префикса data-, часто называют атрибутами data-* или data-атрибутами. При формировании имён этих атрибутов сначала идёт слово data, потом — тире (-), а потом — оставшаяся часть имени, устроенная так, как нужно разработчику.
Этим атрибутам необязательно назначать значения
<div data-foo></div>
...но они могут содержать значения
<div data-size="large"></div>
Тут мы имеем дело с HTML, поэтому надо экранировать HTML-код, который, возможно, решено будет записать в атрибут
<li data-prefix="Careful with HTML in here."><li>
Если надо - можно создавать длинные имена атрибутов
<aside data-some-long-attribute-name><aside>
Чего не стоит делать с атрибутами data-*
В таких атрибутах не стоит хранить содержимое, которое должно быть доступно ассистивным технологиям. Если некие данные должны быть видимы на странице, или должны быть доступны средствам для чтения с экрана, их недостаточно просто поместить в атрибут data-*. Такие данные должны появиться и в обычной HTML-разметке.
Эти данные не выводятся на странице, они недоступны ассистивным технологиям
<div> data-name="Chris Coyier"></div>
CSS и data-*
Для стилизации в HTML/CSS используются, в основном, классы. И хотя классы — это замечательный инструмент (они отличаются средним уровнем специфичности, с ними можно работать с помощью удобных JavaScript-методов через свойство элементов classList), элемент может либо иметь, либо не иметь некоего класса (то есть, класс в элементе либо «включен», либо «выключен»). При использовании атрибутов data-* в распоряжении разработчика оказываются и возможности классов («включено/выключено»), и возможность выбора элементов, основываясь на значении атрибута, которое он имеет на том же уровне специфичности.
Выбор элементов, у которых имеется указанный атрибут
[data-size] { }
Выбор элемента, атрибут которого имеет заданное значение
[data-state="open"],
[aria-expanded="true"] { }
Селектор "начинается с", использование которого приведёт к выбору элементов, атрибут
которых содержит "3", а так же - что угодно другое, начинающееся с 3 - вроде "3.14"
[data-version^="3"] { }
Селектор "содержит" указывает на то, что заданная строка должна содержаться где-то в значении свойства
[data-company*="google"] { }
CSS позволяет извлекать значения атрибутов data-* и выводить их на странице.
<div data-emoji="111">
[data-emoji]::before {
content: attr(data-emoji); Возвращает 111
margin-right: 5px;
}
JavaScript и data-*
К значениям атрибутов data-* можно обращаться, как и к значениям других атрибутов, пользуясь методом getAtribute для чтения данных, и методом setAttribute для записи.
Чтение значения атрибута
let value = el.getAttribute("data-state");
Запись значения атрибута.
В data-state записывается значение "collapsed"
el.setAttribute("data-state", "collapsed");
Идея тут заключается в том, чтобы, пользуясь атрибутами data-*, размещать в HTML-коде данные, к которым можно обращаться из JavaScript для выполнения неких действий.
Распространённый вариант реализации этого сценария направлен на организацию работы с базами данных. Предположим, у нас имеется кнопка Like:
< button data-id="435432343">Like< /button>
У этой кнопки может быть обработчик нажатия, выполняющий AJAX-запрос к серверу. Обработчик, если пользователь лайкнет что-то с помощью кнопки, увеличивает количество лайков в серверной базе данных. Обработчик знает о том, какую именно запись надо обновить, так как берёт сведения об этом из атрибута data-*.