Работа с data атрибутами в HTML/CSS/JS
Все атрибуты у HTML элементов, начинающиеся с префикса data-*, являются пользовательскими. Data атрибуты можно использовать для дополнительной стилизации, но чаще всего они применяются для создания интерактивной логики в JavaScript. Особенно их любят применять разные библиотеки, когда пользователю предлагается настроить скрипт через data атрибуты. Сделать это может любой начинающий вебмастер с начальным уровнем знаний JavaScript.
Использование data атрибутов в HTML и CSS
Data атрибут - это очень гибкий инструмент и сейчас мы рассмотрим, как можно его использовать в HTML и CSS.
Как добавить data атрибут к HTML тегу
Вначале обязательно ставим префикс data, затем через дефис указываем какое-то наше слово подходящее по смыслу и само значение. Например мы хотим отсортировать только категорию с домашними питомцами. Все слова, за исключением самого префикса data-*, мы можем придумывать свои собственные. Так мы можем управлять отдельными группами элементов, помеченные data атрибутами. Это удобно для создания интерактива на языке JavaScript.
<button data-categories="pets">Pets</button>
Длина названия data атрибута может быть любой, слова должны разделяться через дефис.
<div data-is-active-color="red"></div>
Пример стилизации элементов с data атрибутом
Мы можем стилизовать любой элемент по его data атрибуту. В CSS коде селектор data атрибута заключается в квадратные скобки. Обращаться можно только по названию атрибута, по тегу + название или по классу (id) + название.
// HTML код
<div class="large_btn" 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 и название атрибута, который надо получить.
element.getAttribute("data-filter")
Метод setAttribute добавляет значение, указанное вторым параметром ("pillows") в data атрибут в первом параметре ("data-filter").
element.setAttribute("data-filter", "pillows")
Второй способ, через объект dataset в структуре DOM
Доступ к коллекции dataset мы получаем по ключу (слово после префикса data-*).
<div data-person></div>
// Получение 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
-
Михаил Русаков
Комментарии (1):
Очень классная статья. DATA атрибуты удобная штука в помощь создания алгоритмов на JS при выборе пользователем сайта какого-либо товара для совершения покупки. Если присваивать конкретному товару или группе товаров DATA атрибут в коде HTML 5, то можно перейти к расчётам его цены в различном сочетании свойств товара. Например, мне удалось после изучения курса Михаила по JS написать алгоритм кода калькулятора для расчёта цены металлических сварных решёток разных размеров и покраски. При этом каждый рисунок решётки получил кнопку расчёта цены, что сильно приближает клиента к пониманию без общения с менеджерами сайта.Посмотреть эту работу калькуляторов можно на моей странице https://servis.kharkov.ua/re/ . Кроме того, я использовал технологию показа модального окна, причём не одного, а нескольких окон на всего одной странице на базе статьи М.Русакова о создании модального окна.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.