Работа с 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) + название.
// HTML код
<div data-size=»large»>button</div>
// 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.
<span data-tooltip=»текст подсказки»></span>
[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
- Получать и изменять значения атрибутов
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 1 ):
Очень классная статья. DATA атрибуты удобная штука в помощь создания алгоритмов на JS при выборе пользователем сайта какого-либо товара для совершения покупки. Если присваивать конкретному товару или группе товаров DATA атрибут в коде HTML 5, то можно перейти к расчётам его цены в различном сочетании свойств товара. Например, мне удалось после изучения курса Михаила по JS написать алгоритм кода калькулятора для расчёта цены металлических сварных решёток разных размеров и покраски. При этом каждый рисунок решётки получил кнопку расчёта цены, что сильно приближает клиента к пониманию без общения с менеджерами сайта.Посмотреть эту работу калькуляторов можно на моей странице https://servis.kharkov.ua/re/ . Кроме того, я использовал технологию показа модального окна, причём не одного, а нескольких окон на всего одной странице на базе статьи М.Русакова о создании модального окна.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Использование data-* атрибутов
HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData() .
Синтаксис HTML
Синтаксис прост — любой атрибут, чьё имя начинается с data- , является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data -атрибуты:
Доступ в JavaScript
Чтение data- атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset (en-US).
Чтобы получить data -атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).
Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным «5» .
Доступ в CSS
Заметим, что data -атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию attr :
Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
Увидеть как это работает можно в примере на JSBin.
Data -атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.
Проблемы
Не храните данные, которые должны быть видимы и доступны в data -атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data -атрибутах.
Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset . Для поддержки IE 10 и более ранних версий получение доступа к data -атрибутам необходимо осуществлять через getAttribute() . Также, производительность чтения data- атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute() .
Тем не менее, для пользовательских метаданных, связанных с элементами, data- атрибуты являются отличным решением.
data-атрибуты и внутреннее хранилище jQuery
В HTML5 к любому элементу документа можно добавить пользовательские атрибуты. Назначение данных атрибутов веб-разработчик определяет самостоятельно, но в большинстве случаев они предназначены для хранения некоторой информации, которую затем можно использовать в скриптах JavaScript. Пользовательские атрибуты всегда начинаются с data-* :
Работа с data-атрибутами посредством методов attr и removeAttr
Выполнение действий над атрибутами data в jQuery обычно осуществляется с помощью методов: attr и removeAttr .
Например, выведем значение data-атрибутов элемента div с id=»phone-1″ в консоль браузера:
Данный метод (attr) возвращает значение data-атрибута в виде строки.
Например, добавим атрибут data-year к вышеприведённому элементу:
Более детально разобраться, как работать с данными методами можно в статье jQuery — Работа с атрибутами HTML элементов.
jQuery — data-атрибуты и метод data
Метод data используется в jQuery не для общения с data-атрибутами. Его основное предназначение — это чтение данных из внутреннего хранилища jQuery ( $.cache ) или запись в него некоторой информации.
Внутреннее хранилище jQuery — это некий контейнер, в который можно помещать произвольную информацию, связанную с определённым DOM-элементом текущей страницы.
Но, тем не менее, данный метод может выполнять чтение HTML5 data-атрибутов, и помещать их во внутреннее хранилище. Это случается только в том случае, если в хранилище jQuery нет ключа с именем, равным имени data-атрибута. В противном случае вы получите значение из хранилища $.cache .
Таким образом работать с data-атрибутами посредством метода data имеет смысл только в том случае, если дальнейшая работа с ними будет вестись через хранилище jQuery.
Пример, в котором рассмотрим, как метод data работает с data-атрибутом:
В методе data ключ соответствует имени data-атрибута без приставки data- .
Кроме этого, если в окончании имени data-атрибута (после data- ) содержится дефисы («-«), то при обращении к нему с помощью метода data буквы стоящие перед дефисом должны быть заменены на заглавные, а сами дефисы убраны. Например, имя атрибута data-last-name должно быть указано в методе data как lastName .
Ещё один момент при работе с методом data заключается в том, что когда jQuery разбирает значение data-атрибута, то он пытается привести его значение (строку) к соответствующему типу JavaScript (булевскому значению, числу, объекту, массиву или null ). Например, значение «420» преобразуется в число 420. Если значение data-атрибута является объектом (начинается с » { «) или массивом (начинается с » [ «), то jQuery использует для разбора значения метод parseJSON . Это означает то, что содержимое атрибута должно иметь валидный JSON синтаксис (включая указания имен свойств в двойных кавычках). Но если попытка разобрать значение data-атрибута окажется не удачной, то оно останется в исходном в виде (т.е. в виде строки).
В итоге, метод data используется для выполнения следующих операций (в зависимости от указанных аргументов):
1. Получение значения ключа, связанного с элементом, из внутреннего хранилища jQuery:
- Чтение data-атрибута (имя которого соответствует указанному ключу) у первого элемента текущего набора, помещение его в хранилище, и возвращение значение этого ключа в качестве результата. Данное действие данный метод выполняет только в том случае, если у элемента есть data-элемент соответствующий ключу и в контейнере $.cache у данного элемента нет записи с указанным ключом.
- Получает значение указанного ключа из хранилища jQuery. Это действие метод data выполняет только в том случае, если в $.cache у элемента есть указанный ключ.
- возвращает значение undefined или пустой объект, если ни одно из вышеперечисленных действий не выполняется.
Если в результате выборки $(‘селектор’) возвращается несколько элементов, то данный метод возвращает значение только для первого элемента из полученного набора.
2. Получение всех данных в виде объекта JavaScript из хранилища jQuery, связанных с указанным элементом:
Более детально этот вариант метода data осуществляет следующее:
- Автоматически помещает data-атрибуты во внутреннее хранилище jQuery. Это действие он выполняет только для тех data-атрибутов, имён (ключей) которых нет на текущий момент в хранилище jQuery.
- Возвращает объект, состоящий из пар ключ-значение, связанных с текущим элементом.
3. Метод data применяют не только для чтения значений, но и для записи данных (ключ-значение), ассоциированных с некоторым элементом DOM во внутреннее хранилище jQuery.
Пример работы с методом data :
Методы для работы с data-хранилищем jQuery
Рассмотрим, какие ещё есть методы в jQuery для работы с data хранилищем кроме data .
Метод removeData
Данный метод предназначен для удаления данных, связанных с определённым элементом, из внутреннего хранилища jQuery. Данный метод не работает с data-атрибутами, поэтому все соответствующие ключу data-атрибуты удалены не будут.
Синтаксис метода removeData :
Удалим несколько пар ключ-значений, ассоциированных с элементом с id=»book-js» из хранилища jQuery:
Функция $.data()
Данная функция выполняет действия аналогичные методу data , но в отличие от него работает на более низком уровне. Поэтому в большинстве случаев используют именно метод data , т.к. он является более удобным инструментом для работы с внутренним хранилищем jQuery.
Данная функция предназначена только для работы с jQuery хранилищем и в отличие от метода $(‘селектор’).data() не извлекает данные из HTML 5 data-атрибутов.
Синтаксис функции jQuery.data() :
Пример использования функции $.data() для сохранения информации, связанной с определённым DOM-элементом, в хранилище jQuery:
Функция $.removeData()
Эта функция также как и метод removeData применяется для удаления данных из внутреннего хранилища jQuery.
$.removeData() является низкоуровневой функцией, также как и $.data() . Поэтому более удобным вариантом является использование метода data() вместо функции $.data() .
Использование функции jQuery.removeData() :
Демонстрация использования функции removeData :
Функция $.hasData()
Эта функция определяет, имеет ли элемент, какие-либо данные во внутреннем хранилище jQuery.
Функция hasData возвращает true , если в хранилище есть какие-либо данные связанные с указанным элементом. В противном случае данная функция возвращает false .
Внутреннее хранилище $.cache используется также самой библиотекой jQuery. Один из примеров — это использование его для хранения кода обработчиков событий jQuery.
Пример использования функции hasData :
Разобраться, как работать в jQuery с data-атрибутами, которые появились в спецификации языка HTML5, можно в статье «jQuery – Методы attr и removeAttr». Эти методы ( attr и removeAttr ) используются не только для управления data-атрибутами, но и любых других атрибутов HTML элементов.
How can I get the values of data attributes in JavaScript code?
Is it possible to get the attributes that beginning with data- , and use it in the JavaScript code like code below? For now I get null as result.
11 Answers 11
You need to access the dataset property:
Because the dataset property wasn’t supported by Internet Explorer until version 11, you may want to use getAttribute() instead:
You can access it as
etc. So in this case: this.dataset.points
You could also grab the attributes with the getAttribute() method which will return the value of a specific HTML attribute.
if you are targeting data attribute in Html element,
document.dataset will not work
Modern browsers accepts HTML and SVG DOMnode.dataset
It is an old Javascript standard for HTML elements (since Chorme 8 and Firefox 6) but new for SVG (since year 2017 with Chorme 55.x and Firefox 51). It is not a problem for SVG because in nowadays (2019) the version’s usage share is dominated by modern browsers.
The values of dataset’s key-values are pure strings, but a good practice is to adopt JSON string format for non-string datatypes, to parse it by JSON.parse() .
Using the dataset property in any context
Code snippet to get and set key-value datasets at HTML and SVG contexts.
