Для чего нужны атрибуты начинающиеся с data
Полное руководство по HTML-атрибутам data-*
Общие сведения
HTML-элементы могут иметь атрибуты, которые используются для решения самых разных задач — от предоставления данных ассистивным технологиям, до стилизации элементов.
При этом не рекомендуется создавать собственные атрибуты, или применять существующие атрибуты такими способами, на которые они не рассчитаны.
Это плохо по многим причинам. HTML-код оказывается неправильно сформированным. И хотя подобное может и не иметь реальных негативных последствий, это лишает разработчика тёплого чувства вызываемого тем, что он создаёт валидный HTML-код. Но главная причина того, что так поступать не следует, заключается в том, что HTML — это язык, который постоянно развивается. В результате, если некий атрибут сегодня в языке не применяется, это не значит, что в будущем ничего не изменится.
Синтаксис
Можно ли использовать атрибут, имеющий имя data?
Вот пример кода, в котором используется атрибут с именем data :
Атрибут с таким именем, вероятно, никому не повредит, но его применение не позволит пользоваться JavaScript-инструментами, которые мы рассмотрим ниже. В этом примере разработчик, фактически, создаёт некий собственный атрибут, что, как уже было сказано, делать не рекомендуется.
Чего не стоит делать с атрибутами data-*
Вот материал о том, как скрывать элементы веб-страниц.
Стилизация элементов с использованием атрибутов data-*
В CSS можно выбирать HTML-элементы, основываясь на атрибутах и их значениях.
Это может показаться интересным. Для стилизации в HTML/CSS используются, в основном, классы. И хотя классы — это замечательный инструмент (они отличаются средним уровнем специфичности, с ними можно работать с помощью удобных JavaScript-методов через свойство элементов classList ), элемент может либо иметь, либо не иметь некоего класса (то есть, класс в элементе либо «включен», либо «выключен»). При использовании атрибутов data-* в распоряжении разработчика оказываются и возможности классов («включено/выключено»), и возможность выбора элементов, основываясь на значении атрибута, которое он имеет на том же уровне специфичности.
Специфичность селекторов атрибутов
Специфичность селекторов атрибутов такая же, как у классов. Специфичность часто рассматривают как значение, состоящее из 4 частей:
А вот ещё один селектор:
Вот, чтобы было понятнее, иллюстрированная версия этих рассуждений.
1 тег, 1 класс и 1 атрибут
У селекторов атрибутов специфичность ниже, чем у идентификаторов ( ID ), но выше, чем у тегов (элементов). Их специфичность равна специфичности классов.
Значения атрибутов, нечувствительные к регистру
Если нужно, чтобы селекторы выбирали бы атрибуты, значения которых могут содержать строки, записанные с использованием разных комбинаций строчных и прописных букв, можно воспользоваться вариантом селектора, нечувствительным к регистру.
Вывод данных, хранящихся в атрибутах data-*
CSS позволяет извлекать значения атрибутов data-* и выводить их на странице.
Примеры использования атрибутов data-* для стилизации элементов
Вот соответствующий CSS-код:
А вот — фрагмент результирующей страницы.
Grid-контейнеры, настройка которых производится с помощью атрибутов data-*
Поэкспериментировать с этим примером можно на CodePen.
Работа с атрибутами data-* в JavaScript
К значениям атрибутов data-* можно обращаться, как и к значениям других атрибутов, пользуясь методом getAtribute для чтения данных, и методом setAttribute для записи.
Однако атрибуты data-* имеют и собственный особый API. Предположим, у нас есть элемент с несколькими атрибутами data-* (что совершенно нормально):
Если имеется ссылка на этот элемент, то читать и записывать значения его атрибутов можно так:
В JavaScript можно работать и со встроенными в элементы наборами данных:
А почему бы не записать в атрибут data-* JSON-данные? Ведь это всего лишь строки, которые можно отформатировать как валидные JSON-данные (учитывая кавычки и прочее). При необходимости эти данные можно извлечь из атрибута и распарсить.
Об использовании атрибутов data-* в JavaScript
Распространённый вариант реализации этого сценария направлен на организацию работы с базами данных. Предположим, у нас имеется кнопка Like :
Итоги
Уважаемые читатели! Как вы применяете HTML-атрибуты data-*?
Как и зачем использовать пользовательские data-атрибуты в HTML5?
Дата публикации: 2017-04-12
От автора: в этой статье я покажу вам, как использовать HTML5 data-атрибуты. Также я расскажу вам, где их можно применить в реальной работе.
Почему именно пользовательские data-атрибуты?
Очень часто нам приходится хранить информацию, связанную с различными DOM-элементами. Для пользователей эта информация может быть несущественной, однако простой доступ к ней сильно упростит жизнь для нас с вами, разработчиков.
Например, у вас на странице показан список ресторанов. До HTML5 для хранения информации о еде в ресторане, а также о расстоянии до него от посетителя вы могли воспользоваться атрибутом class. А что если вам также нужно хранить id ресторана, чтобы знать, в какой конкретный ресторан пользователь собирается пойти?
С подходом на HTML-классах связано несколько проблем:
атрибут class не предназначен для хранения такой информации, его основная задача – позволять разработчику назначать стили на набор элементов;
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
каждый новый кусок информации потребует добавления отдельного класса, что усложняет парсинг данных в JS;
скажем, какой-то класс начинается с чисел. Если позже вы захотите стилизовать элементы с помощью такого класса, то вам придется либо отказаться от чисел, либо использовать селекторы атрибутов.
Чтобы избавиться от этих проблем, в HTML5 были представлены пользовательские data-атрибуты. Все атрибуты на элементе, начинающиеся на data- являются data-атрибутами. С их помощью также можно стилизовать элементы.
Теперь давайте изучим основы data-атрибутов и узнаем, как получить их значения в CSS и JS.
Синтаксис HTML
Как я уже упомянул ранее, data-атрибуты начинаются на data-. Пример:
Теперь эти data-атрибуты можно использовать для поиска и сортировки ресторанов для посетителей. Например, можно отобразить только вегетарианские рестораны в определенном радиусе.
Помимо префикса data- в именах пользовательских data-атрибутов могут встречаться буквы, цифры, тире (-), точка (.), двоеточие (:) и нижнее подчеркивание (_). Заглавных букв в имени быть не должно.
При использовании data-атрибутов необходимо помнить о двух вещах.
Первое, тип хранимых в атрибуте данных должен быть string (строка). Также в data-атрибуте могут храниться любые данные, которые можно перекодировать в строку. Преобразования типов должны выполняться в JS.
Второе, data-атрибуты необходимо использовать только в крайнем случае, если ни один другой HTML-элемент или атрибут не подходит. Например, нельзя хранить класс элемента в атрибуте data-class.
У одного элемента может быть сколько угодно много data-атрибутов с самыми различными значениями.
Data-атрибуты и CSS
Data-атрибуты в CSS можно использовать для стилизации элементов с помощью селекторов атрибутов. Также с помощью функции attr() можно показывать пользователям информацию из data-атрибутов (с помощью тултипа, например).
Стилизация элементов
Возвращаемся к нашему примеру с ресторанами. Вы можете дать подсказку пользователям о типе ресторана или расстоянии до него с помощью селекторов атрибутов. С их помощью можно задать разные фоны ресторанам, пример:
HTML-атрибуты data-* для хранения параметров и получения их в js
В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.
Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.
Например, для сохранения уникального номера блока часто пишут так:
А если нам нужно добавить еще один класс для каждого элемента? Или модификатор для отдельных? Да, конечно, можно обрезать регуляркой или другим костыликом на ваш вкус.
Как может показаться, тут можно задействовать id, но у нас могут быть блоки с одинаковым номером.
Иногда используют атрибут ‘rel’, но его можно использовать только для ссылок, хотя я видел и у других элементов. И опять же недостаток — мы можем записать в него только одно значение.
И вот нам на помощь спешат Чип и Дейл атрибуты data-*.
Плюшки
Можно присобачить к любому тегу и старые браузеры ничего не скажут против.
Можно в названии писать словосочетания: data-email-id=”190”.
Можно использовать любую строку в значении.
Можно использовать любой количество таких параметров для одного тега.
HTML тогда превратится в это:
Теперь самое интересное, а именно — работа в jQuery.
Если же мы использовали словосочетание через дефис, то мы сможем получить его в camelCase:
В общем, как только вам понабиться сохранить дополнительные параметры в теге, то используйте data-атрибуты.
Интересно, кто нибудь пробовал хранить в атрибутах json? 🙂
Хотя это, пожалуй, в ненормальное программирование.
Использование data-атрибутов в HTML, CSS, JavaScript и jQuery
Использование data-атрибутов в HTML и CSS
Для того чтобы записать data-атрибуты в HTML, не нужно придумывать ничего нового. Поскольку это стандартный для HTML5 атрибут, то в любом открывающем теге вы ставите пробел после названия этого тега или другого атрибута, записываете обязательный префикс data- и добавляете любое слово, связанное по смыслу с тем значением, которое вы хотите в этот атрибут поместить.
Например, атрибуты data-text-top и data-text-bottom в разметке ниже нужны для того, чтобы использовать текст в них сверху и снизу в выезжающих при наведении на фото псевдоэлементах ::before и ::after, соответственно.
Результат использования data-атрибутов в HTML и CSS можно посмотреть ниже. Для этого нужно навести курсор мыши на любое изображение.
See the Pen by Elen (@ambassador) on CodePen.0
Использование data-атрибутов в JavaScript и jQuery.
И это все, что нужно сделать для работы плагина, не считая подключения файлов jQuery и файлов самого плагина Fancybox.
Ранее для аналогичных целей разработчики часто использовали атрибут class или создавали нестандартные атрибуты, но атрибут class на самом деле не предназначен для этого, да и на нестандартную разметку «ругается» валидатор W3C. С введением же data-атрибутов в HTML5 сохранять и извлекать пользовательские данные из HTML стало действительно легко и приятно, тем более, что для этого есть свойства и методы как в JavaScript, так и в jQuery. Рассмотрим их подробнее.
Доступ к data-атрибутам с помощью нативного JavaScript
Рассмотрим эти способы нативнного JavaScript подробнее.
Свойство HTMLElement.dataset
Свойство dataset (набор данных в переводе с английского) позволяет легко получить доступ к атрибутам данных любого html-элемента. Рассмотрим следующий пример.
Методы getAttribute()/setAttribute()
Теперь давайте посмотрим, как можно использовать метод getAttribute(‘attribute’) для получения значения data-атрибутов и метод setAttribute(‘attribute’, ‘value’) для добавления data-атрибута с нужным значением. Перепишем код примера, представленного выше.
Доступ к атрибутам данных с помощью jQuery. Метод data()
Пример решения задачи с составными условиями и data-атрибутами
В статье «Простые задачи по JavaScript» вы можете найти задачу на составные условия, в которой нужно написать код, проверяющий ответы пользователя на 4 вопроса и предлагающий ему определенные книги. Задачу можно решить с помощью ряда условий if. else, использования массивов объектов и методов для работы с массивами, но также можно сделать список с data-атрибутами, имеющими значение 0 или 1. А список вопросов представить с помощью нескольких флажков. Вариант решения будет таким:
Надеюсь, что после прочтения этой статьи у вас появились поводы использовать data-атрибуты в HTML, CSS, JavaScript/jQuery для хранения нужной вам информации.
Полное руководство по HTML-атрибутам data-*
Общие сведения
HTML-элементы могут иметь атрибуты, которые используются для решения самых разных задач — от предоставления данных ассистивным технологиям, до стилизации элементов.
При этом не рекомендуется создавать собственные атрибуты, или применять существующие атрибуты такими способами, на которые они не рассчитаны.
Это плохо по многим причинам. HTML-код оказывается неправильно сформированным. И хотя подобное может и не иметь реальных негативных последствий, это лишает разработчика тёплого чувства вызываемого тем, что он создаёт валидный HTML-код. Но главная причина того, что так поступать не следует, заключается в том, что HTML — это язык, который постоянно развивается. В результате, если некий атрибут сегодня в языке не применяется, это не значит, что в будущем ничего не изменится.
Синтаксис
Можно ли использовать атрибут, имеющий имя data?
Вот пример кода, в котором используется атрибут с именем data :
Атрибут с таким именем, вероятно, никому не повредит, но его применение не позволит пользоваться JavaScript-инструментами, которые мы рассмотрим ниже. В этом примере разработчик, фактически, создаёт некий собственный атрибут, что, как уже было сказано, делать не рекомендуется.
Чего не стоит делать с атрибутами data-*
Вот материал о том, как скрывать элементы веб-страниц.
Стилизация элементов с использованием атрибутов data-*
В CSS можно выбирать HTML-элементы, основываясь на атрибутах и их значениях.
Это может показаться интересным. Для стилизации в HTML/CSS используются, в основном, классы. И хотя классы — это замечательный инструмент (они отличаются средним уровнем специфичности, с ними можно работать с помощью удобных JavaScript-методов через свойство элементов classList ), элемент может либо иметь, либо не иметь некоего класса (то есть, класс в элементе либо «включен», либо «выключен»). При использовании атрибутов data-* в распоряжении разработчика оказываются и возможности классов («включено/выключено»), и возможность выбора элементов, основываясь на значении атрибута, которое он имеет на том же уровне специфичности.
Специфичность селекторов атрибутов
Специфичность селекторов атрибутов такая же, как у классов. Специфичность часто рассматривают как значение, состоящее из 4 частей:
А вот ещё один селектор:
Вот, чтобы было понятнее, иллюстрированная версия этих рассуждений.
1 тег, 1 класс и 1 атрибут
У селекторов атрибутов специфичность ниже, чем у идентификаторов ( ID ), но выше, чем у тегов (элементов). Их специфичность равна специфичности классов.
Значения атрибутов, нечувствительные к регистру
Если нужно, чтобы селекторы выбирали бы атрибуты, значения которых могут содержать строки, записанные с использованием разных комбинаций строчных и прописных букв, можно воспользоваться вариантом селектора, нечувствительным к регистру.
Вывод данных, хранящихся в атрибутах data-*
CSS позволяет извлекать значения атрибутов data-* и выводить их на странице.
Примеры использования атрибутов data-* для стилизации элементов
Вот соответствующий CSS-код:
А вот — фрагмент результирующей страницы.
Grid-контейнеры, настройка которых производится с помощью атрибутов data-*
Поэкспериментировать с этим примером можно на CodePen.
Работа с атрибутами data-* в JavaScript
К значениям атрибутов data-* можно обращаться, как и к значениям других атрибутов, пользуясь методом getAtribute для чтения данных, и методом setAttribute для записи.
Однако атрибуты data-* имеют и собственный особый API. Предположим, у нас есть элемент с несколькими атрибутами data-* (что совершенно нормально):
Если имеется ссылка на этот элемент, то читать и записывать значения его атрибутов можно так:
В JavaScript можно работать и со встроенными в элементы наборами данных:
А почему бы не записать в атрибут data-* JSON-данные? Ведь это всего лишь строки, которые можно отформатировать как валидные JSON-данные (учитывая кавычки и прочее). При необходимости эти данные можно извлечь из атрибута и распарсить.
Об использовании атрибутов data-* в JavaScript
Распространённый вариант реализации этого сценария направлен на организацию работы с базами данных. Предположим, у нас имеется кнопка Like :
Итоги
Уважаемые читатели! Как вы применяете HTML-атрибуты data-*?