Полное руководство по HTML-атрибутам data-*
Представляем вашему вниманию перевод статьи, посвящённой использованию атрибутов data-* . Это — атрибуты, которые можно применять для удобного хранения в стандартных HTML-элементах различной полезной информации. Эта информация, в частности, может применяться в JavaScript и CSS.
Общие сведения
HTML-элементы могут иметь атрибуты, которые используются для решения самых разных задач — от предоставления данных ассистивным технологиям, до стилизации элементов.
При этом не рекомендуется создавать собственные атрибуты, или применять существующие атрибуты такими способами, на которые они не рассчитаны.
Это плохо по многим причинам. HTML-код оказывается неправильно сформированным. И хотя подобное может и не иметь реальных негативных последствий, это лишает разработчика тёплого чувства вызываемого тем, что он создаёт валидный HTML-код. Но главная причина того, что так поступать не следует, заключается в том, что HTML — это язык, который постоянно развивается. В результате, если некий атрибут сегодня в языке не применяется, это не значит, что в будущем ничего не изменится.
Правда, если кому-то нужно использовать подобные атрибуты, у него есть совершенно нормальный способ это делать. Речь идёт о создании собственных атрибутов, названия которых начинаются с префикса data- . С этими атрибутами можно совершенно спокойно работать, применяя их так, как нужно программисту.
Синтаксис
Возможность создавать собственные HTML-атрибуты и записывать в них данные может оказаться крайне полезной. Это, как вы понимаете, возможно благодаря атрибутам data-* . Именно для этого такие атрибуты и предназначены. Выглядит это так:
Эти атрибуты, именно из-за того, что они всегда начинаются с префикса data- , часто называют атрибутами data-* или data-атрибутами. При формировании имён этих атрибутов сначала идёт слово data , потом — тире ( — ), а потом — оставшаяся часть имени, устроенная так, как нужно разработчику.
Можно ли использовать атрибут, имеющий имя data?
Вот пример кода, в котором используется атрибут с именем data :
Атрибут с таким именем, вероятно, никому не повредит, но его применение не позволит пользоваться JavaScript-инструментами, которые мы рассмотрим ниже. В этом примере разработчик, фактически, создаёт некий собственный атрибут, что, как уже было сказано, делать не рекомендуется.
Чего не стоит делать с атрибутами data-*
В таких атрибутах не стоит хранить содержимое, которое должно быть доступно ассистивным технологиям. Если некие данные должны быть видимы на странице, или должны быть доступны средствам для чтения с экрана, их недостаточно просто поместить в атрибут data-* . Такие данные должны появиться и в обычной HTML-разметке.
Chris Coyier Вот материал о том, как скрывать элементы веб-страниц.
Стилизация элементов с использованием атрибутов data-*
В CSS можно выбирать HTML-элементы, основываясь на атрибутах и их значениях.
/* Выбрать элемент с таким именем атрибута, имеющим такое значение */ [data-size="large"] < padding: 2rem; font-size: 125%; >/* Выбор можно ограничить элементом, классом, или чем-то другим */ button[data-type="download"] < >.card[data-pad="extra"]
Это может показаться интересным. Для стилизации в HTML/CSS используются, в основном, классы. И хотя классы — это замечательный инструмент (они отличаются средним уровнем специфичности, с ними можно работать с помощью удобных JavaScript-методов через свойство элементов classList ), элемент может либо иметь, либо не иметь некоего класса (то есть, класс в элементе либо «включен», либо «выключен»). При использовании атрибутов data-* в распоряжении разработчика оказываются и возможности классов («включено/выключено»), и возможность выбора элементов, основываясь на значении атрибута, которое он имеет на том же уровне специфичности.
/* Выбор элементов, у которых имеется указанный атрибут */ [data-size] < >/* Выбор элемента, атрибут которого имеет заданное значение */ [data-state="open"], [aria-expanded="true"] < >/* Селектор "начинается с", использование которого приведёт к выбору элементов, атрибут которых содержит "3", а так же - что угодно другое, начинающееся с 3 - вроде "3.14" */ [data-version^="3"] < >/* Селектор "содержит" указывает на то, что заданная строка должна содержаться где-то в значении свойства */ [data-company*="google"]
Специфичность селекторов атрибутов
Специфичность селекторов атрибутов такая же, как у классов. Специфичность часто рассматривают как значение, состоящее из 4 частей:
- Встроенный стиль
- ID
- Классы и атрибуты
- Теги
А вот ещё один селектор:
div.card[data-foo="bar"]
Он уже будет описываться значением 0, 0, 2, 1 . Число 2 здесь появляется из-за того, что тут имеется и класс ( .card ), и атрибут ([data-foo=»bar»] ). А 1 здесь из-за того, что тут присутствует лишь один тег ( div ).
Вот, чтобы было понятнее, иллюстрированная версия этих рассуждений.
1 тег, 1 класс и 1 атрибут
У селекторов атрибутов специфичность ниже, чем у идентификаторов ( ID ), но выше, чем у тегов (элементов). Их специфичность равна специфичности классов.
Значения атрибутов, нечувствительные к регистру
Если нужно, чтобы селекторы выбирали бы атрибуты, значения которых могут содержать строки, записанные с использованием разных комбинаций строчных и прописных букв, можно воспользоваться вариантом селектора, нечувствительным к регистру.
/* Всё это соответствует следующему селектору */ [data-state="open" i]
Такое поведение обеспечивает использование в селекторе символа i .
Вывод данных, хранящихся в атрибутах data-*
CSS позволяет извлекать значения атрибутов data-* и выводить их на странице.
/* */ [data-emoji]::before < content: attr(data-emoji); /* Возвращает ':-)' */ margin-right: 5px; >Примеры использования атрибутов data-* для стилизации элементов
Атрибуты data-* можно использовать для указания того, сколько столбцов должно быть у grid -контейнера. Вот HTML-код:
Вот соответствующий CSS-код:
[data-columns] < display: grid; grid-gap: 1rem; padding: 1rem; margin: 0 0 1rem 0; >[data-columns] > div < height: 100px; background: white; >[data-columns="2"] < background: #64B5F6; grid-template-columns: repeat(2, 1fr); >[data-columns="3"] < background: #9CCC65; grid-template-columns: repeat(3, 1fr); >[data-columns="4"]
А вот — фрагмент результирующей страницы.
Grid-контейнеры, настройка которых производится с помощью атрибутов data-*
Поэкспериментировать с этим примером можно на CodePen.
Работа с атрибутами data-* в JavaScript
К значениям атрибутов data-* можно обращаться, как и к значениям других атрибутов, пользуясь методом getAtribute для чтения данных, и методом setAttribute для записи.
// Чтение значения атрибута let value = el.getAttribute("data-state"); // Запись значения атрибута. // В data-state записывается значение "collapsed" el.setAttribute("data-state", "collapsed");Однако атрибуты data-* имеют и собственный особый API. Предположим, у нас есть элемент с несколькими атрибутами data-* (что совершенно нормально):
Если имеется ссылка на этот элемент, то читать и записывать значения его атрибутов можно так:
// Чтение span.dataset.info; // 123 span.dataset.index; // 2 // Запись span.dataset.prefix = "Mr. "; span.dataset.emojiIcon = ";-)";Обратите внимание на то, что в последней строке JS-кода используется запись имени атрибута в верблюжьем (CamelCase) стиле. Система автоматически преобразует имена HTML-атрибутов, записанные в кебаб-стиле, в имена, записанные в верблюжьем стиле. То есть — data-this-little-piggy превращается в dataThisLittlePiggy .
Этот API, конечно, не такой удобный, как API classList, поддерживающий понятные методы вроде add , remove , toggle и replace , но это, всё же, лучше чем ничего.
В JavaScript можно работать и со встроенными в элементы наборами данных:
А почему бы не записать в атрибут data-* 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Об использовании атрибутов data-* в JavaScript
Идея тут заключается в том, чтобы, пользуясь атрибутами data-* , размещать в HTML-коде данные, к которым можно обращаться из JavaScript для выполнения неких действий.
Распространённый вариант реализации этого сценария направлен на организацию работы с базами данных. Предположим, у нас имеется кнопка Like :
У этой кнопки может быть обработчик нажатия, выполняющий AJAX-запрос к серверу. Обработчик, если пользователь лайкнет что-то с помощью кнопки, увеличивает количество лайков в серверной базе данных. Обработчик знает о том, какую именно запись надо обновить, так как берёт сведения об этом из атрибута data-* .
Итоги
Вот, вот и вот — стандарты, связанные с селекторами атрибутов data-* . Здесь, на сайте Caniuse, можно узнать о поддержке атрибутов data-* браузерами. Если вы раньше не пользовались этими атрибутами, надеемся, этот материал дал вам пищу для размышлений.
Уважаемые читатели! Как вы применяете HTML-атрибуты data-*?
Работа с data атрибутами в HTML/CSS/JS
Все атрибуты у HTML элементов, начинающиеся с префикса data-*, являются пользовательскими. Data атрибуты можно использовать для дополнительной стилизации, но чаще всего они применяются для создания интерактивной логики в JavaScript. Особенно их любят применять разные библиотеки, когда пользователю предлагается настроить скрипт через data атрибуты. Сделать это может любой начинающий вебмастер с начальным уровнем знаний JavaScript.
Использование data атрибутов в HTML и CSS
Data атрибут — это очень гибкий инструмент и сейчас мы рассмотрим, как можно его использовать в HTML и CSS.
Как добавить data атрибут к HTML тегу
Вначале обязательно ставим префикс data, затем через дефис указываем какое-то наше слово подходящее по смыслу и само значение. Например мы хотим отсортировать только категорию с домашними питомцами. Все слова, за исключением самого префикса data-*, мы можем придумывать свои собственные. Так мы можем управлять отдельными группами элементов, помеченные data атрибутами. Это удобно для создания интерактива на языке JavaScript.
Длина названия data атрибута может быть любой, слова должны разделяться через дефис.
Пример стилизации элементов с data атрибутом
Мы можем стилизовать любой элемент по его data атрибуту. В CSS коде селектор data атрибута заключается в квадратные скобки. Обращаться можно только по названию атрибута, по тегу + название или по классу (id) + название.
// CSS код
// селектор по названию атрибута
[data-size=»large»] font-size: 30px;
padding: 20px;
>
// селектор по тегу и названию
div [data-size=»large»] font-size: 30px;
padding: 20px;
>
// селектор по классу и названию
large_btn.[data-size=»large»] font-size: 30px;
padding: 20px;
>
Принцип создания подсказок с data атрибутом на CSS
Прописываем текст подсказки в data атрибуте тега. Затем с помощью псевдоэлементов ::before или ::after передать в функцию attr значение атрибута data-tooltip.
[data-tooltip]::after content: attr(data-tooltip);
>
Использование data атрибутов в JavaScript
В JS существует, как минимум два способа получения data атрибута:
Первый способ, через getAttribute и setAttribute
Указываем выбранный на странице элемент (тег, id, класс), сам метод getAttribute и название атрибута, который надо получить.
Метод setAttribute добавляет значение, указанное вторым параметром («pillows») в data атрибут в первом параметре («data-filter»).
Второй способ, через объект dataset в структуре DOM
Доступ к коллекции dataset мы получаем по ключу (слово после префикса data-*).
// Получение data атрибута
div.dataset.person
// Добавление значения для data атрибута
div.dataset.person = «Donald»
Работа с data атрибутами в JavaScript — достаточно актуальная тема, с которой вы будете часто встречаться, более основательно познакомиться с data атрибутами и не только, вы сможете в моем видеокурсе по JavaScript.
Итоги
Data атрибуты позволяют хранить разную информацию об элементе, которая может помочь для работы скриптов, а также для CSS стилизации элементов. HTML код с созданными атрибутами с data-* префиксом будет, абсолютно валидным. Создавать свои собственные data атрибуты для хранения значений стало возможным лишь в HTML5, до этого такой возможности очень не хватало веб-разработчикам. Вот список самых востребованные задач, которые удобно решать с помощью data атрибутов:
- Создание всплывающих подсказок на чистом CSS
- Получать и изменять значения атрибутов
Создано 16.11.2020 10:06:02
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 1 ):
master284 16.11.2020 12:45:44
Очень классная статья. DATA атрибуты удобная штука в помощь создания алгоритмов на JS при выборе пользователем сайта какого-либо товара для совершения покупки. Если присваивать конкретному товару или группе товаров DATA атрибут в коде HTML 5, то можно перейти к расчётам его цены в различном сочетании свойств товара. Например, мне удалось после изучения курса Михаила по JS написать алгоритм кода калькулятора для расчёта цены металлических сварных решёток разных размеров и покраски. При этом каждый рисунок решётки получил кнопку расчёта цены, что сильно приближает клиента к пониманию без общения с менеджерами сайта.Посмотреть эту работу калькуляторов можно на моей странице https://servis.kharkov.ua/re/ . Кроме того, я использовал технологию показа модального окна, причём не одного, а нескольких окон на всего одной странице на базе статьи М.Русакова о создании модального окна.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Как получить data атрибут js
важность: 5
Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.
Choose the genre Choose the genre Использование data-* атрибутов
HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData() .
Синтаксис HTML
Синтаксис прост — любой атрибут, чьё имя начинается с data- , является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data -атрибуты:
article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> . article>
Доступ в JavaScript
Чтение data- атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset (en-US).
Чтобы получить data -атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).
var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"
Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным «5» .
Доступ в CSS
Заметим, что data -атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию attr() :
article::before content: attr(data-parent); >
Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
article[data-columns="3"] width: 400px; > article[data-columns="4"] width: 600px; >
Увидеть как это работает можно в примере на JSBin.
Data -атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.
Проблемы
Не храните данные, которые должны быть видимы и доступны в data -атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data -атрибутах.
Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset . Для поддержки IE 10 и более ранних версий получение доступа к data -атрибутам необходимо осуществлять через getAttribute() . Также, производительность чтения data- атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute() .
Тем не менее, для пользовательских метаданных, связанных с элементами, data- атрибуты являются отличным решением.
Смотрите также
- This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
- How to use HTML5 data attributes (Sitepoint)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.