Элементы HTML могут иметь атрибуты, которые используются для чего угодно, от информации о доступности до стилистического контроля.
Что не рекомендуется это составление собственных атрибутов или перепрофилирования существующих атрибутов для несвязанного функциональности.
Есть множество причин, по которым это плохо. Ваш HTML-код становится невалидным, что может не иметь никаких реальных негативных последствий, но лишает вас этого теплого нечеткого действительного чувства HTML. Самая веская причина в том, что HTML - это живой язык, и только потому, что атрибуты и значения, которые ничего не делают сегодня, не означают, что они никогда этого не сделают.
Хорошая новость: вы можете создать свои собственные атрибуты. Вам просто нужно добавить к ним префикс, data-* и тогда вы сможете делать то, что вам нравится!
Синтаксис
Может быть очень удобно иметь возможность создавать свои собственные атрибуты HTML и помещать в них свою собственную информацию. К счастью, вы можете это сделать с data атрибутами:
Атрибуты данных часто называют data-* атрибутами, так как они всегда отформатированы таким образом: слово data, затем тире -, затем другой текст, который вы можете составить.
Можете ли вы использовать один атрибут data?
Вероятно, это не повредит, но вы не получите JavaScript API, о котором мы расскажем позже в этом руководстве. По сути, вы создаете для себя атрибут, который, как я уже упоминал во вступлении, не рекомендуется.
Что не стоит делать с data атрибутами
Хранить контент, который должен быть доступен. Если контент должен просматриваться или читаться на странице, помещайте его не только в data атрибут, но и в HTML-контент.
Chris Coyier
Стилизация с атрибутами данных
CSS может выбирать элементы HTML на основе атрибутов и их значений.
/* Select any element with this data attribute and value */
[data-size="large"] {
padding: 2rem;
font-size: 125%;
}
/* You can scope it to an element or class or anything else */
button[data-type="download"] { }
.card[data-pad="extra"] { }
Это может быть убедительным. Преобладающими хуками стилей в HTML / CSS являются классы, и хотя классы хороши (они имеют среднюю специфичность и хорошие методы JavaScript через classList), у элемента либо есть, либо нет (по сути, он включен или выключен ). С data-* атрибутами вы получаете эту способность включения / выключения плюс возможность выбирать на основе значения, которое оно имеет на том же уровне специфичности.
/* Selects if the attribute is present at all */
[data-size] { }
/* Selects if the attribute has a particular value */
[data-state="open"],
[aria-expanded="true"] { }
/* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */
[data-version^="3"] { }
/* "Contains" meaning if the value has the string anywhere inside it */
[data-company*="google"] { }
Специфика выбора атрибутов
Это точно так же, как класс. Мы часто думаем о специфике как о значении из четырех частей:
встроенный стиль, идентификаторы, классы / атрибуты, теги
Таким образом, один селектор атрибута равен 0, 0, 1, 0. Данный селектор:
div.card[data-foo="bar"] { }
... будет 0, 0, 2, 1.
2 - потому что есть один class (.card) и один attribute ([data-foo="bar"]), а 1 - потому что есть один tag (div).
Селекторы атрибутов имеют меньшую специфичность, чем идентификатор, больше, чем элемент / тег, и такие же, как класс.
Значения атрибутов без учета регистра
В случае, если вам необходимо исправить возможные несоответствия капитализации в ваших атрибутах данных, в селекторе атрибутов для этого есть вариант без учета регистра.
/* Will match
*/
[data-state="open" i] { }
Использование атрибутов данных для визуализации
CSS позволяет вам извлечь значение атрибута данных и отобразить его, если вам нужно.
Вы можете использовать атрибуты данных, чтобы указать, сколько столбцов вы хотите иметь в сетке контейнера.
Доступ к атрибутам данных в JavaScript
Как и любой другой атрибут, вы можете получить доступ к значению с помощью универсального метода getAttribute.
let value = el.getAttribute("data-state");
// You can set the value as well.
// Returns data-state="collapsed"
el.setAttribute("data-state", "collapsed");
Но атрибуты данных также имеют свой собственный API. Допустим, у вас есть элемент с несколькими атрибутами данных (что вполне нормально):
Если у вас есть ссылка на этот элемент, вы можете установить и получить такие атрибуты, как:
// Get
span.dataset.info; // 123
span.dataset.index; // 2
// Set
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = "🎪";
Обратите внимание на использование camelCase в последней строке. Он автоматически преобразует атрибуты стиля kebab в HTML, например data-this-little-piggy, в стиль camelCase в JavaScript будет dataThisLittlePiggy.
Этот API, возможно, не так хорошо , как classList с четкими методами add, remove, toggle и replace, но это лучше, чем ничего.
У вас также есть доступ к встроенным наборам данных:
Данные JSON внутри атрибутов данных
Эй, а почему бы и нет? Это просто строка, и ее можно отформатировать как допустимый 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 для выполнения определенных задач.
Обычный пример связан с функциональностью базы данных. Скажем, у вас есть кнопка «Like»:
У этой кнопки может быть обработчик кликов, который выполняет Ajax-запрос к серверу, чтобы увеличить количество лайков в базе данных при клике. Он знает, какую запись обновлять, поскольку получает ее из атрибута данных.
