Использование data-атрибутов в HTML, CSS, JavaScript и jQuery

HTML5 в своем стандарте принес немало нового, и одним из таких новшеств стала возможность добавлять любые пользовательские атрибуты в разметку страницы с использованием волшебной приставки, или префикса data-, т.е. данные. Причем использовать эти данные вы можете как в CSS, так и в JavaScript.

Использование 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

Работу этого кода невозможно представить без использования свойства transition для анимации при наведении на картинку или блок. Плюс для свойства content, обязательного для псевдоэлементов ::before и ::after, можно задать функцию attr(data-text-top), указав в скобках любой data- или другой атрибут вместо  data-text-top.

Использование data-атрибутов в JavaScript и jQuery.

Однако, это еще не все. В том случае, когда часть информации должна быть некоторое время скрыта от пользователя, очень легко ее спрятать в data-атрибуты, а затем "вытащить" с помощью JavaScript или jQuery. Именно так поступают разработчики многих плагины фотогалерей или слайдеров. Например, чтобы добавить просмотр изображения в модальном окне в фотогалерее Fancybox, нужно в разметке указать атрибут data-fancybox, а атрибут data-caption используется для вывода заголовка под изображением:

И это все, что нужно сделать для работы плагина, не считая подключения файлов jQuery и файлов самого плагина Fancybox.

Ранее для аналогичных целей разработчики часто использовали атрибут class или создавали нестандартные атрибуты, но атрибут class на самом деле не предназначен для этого, да и на нестандартную разметку "ругается" валидатор W3C. С введением же data-атрибутов в HTML5 сохранять и извлекать пользовательские данные из HTML стало действительно легко и приятно, тем более, что для этого есть свойства и методы как в JavaScript, так и в jQuery. Рассмотрим их подробнее.

Доступ к data-атрибутам с помощью нативного JavaScript

Классический JavaScript называют еще нативным или ванильным. С появлением HTML5 его ядро дополнилось свойством dataset, которое как раз и позволяет манипулировать значениями data-атрибутов. Кроме того, уже очень давно в JS существует метод getAttribute(), который дает нам возможность получить любой атрибут, причем не только с приставкой data-, но и такие известные, как src у изображения или href у ссылки.

Рассмотрим эти способы нативнного JavaScript подробнее.

Свойство HTMLElement.dataset

Свойство  dataset (набор данных в переводе с английского) позволяет легко получить доступ к атрибутам данных любого html-элемента. Рассмотрим следующий пример.

See the Pen
data-attribute JavaScript control by Elen (@ambassador)
on CodePen.0

В каждый элемента <li> мы добавили ряд data-атрибутов, а именно data-speciality, data-age, data-phone-number, значения которых используется для хранения данных о каждом сотруднике. В скрипте мы добавили для всех элементов <li> обработчик события клика   (emploee.addEventListener('click', function() {...})) .

Функция, описанная в нем, позволяет вывести данные о сотруднике, формируя вложенный список для существующего элемента <li>, по которому был сделан щелчок, с помощью свойства innerHTML. В этой функции мы проверяем, есть ли атрибут data-name у элемента и, в случае, если его нет, создаем такой атрибут динамически, и используем его при добавлении вложенного списка. Заодно этот атрибут служит для того, чтобы убрать лишнюю информацию при повторном клике.

Как работает свойство dataset?

Когда вы выбираете отдельные свойства с помощью dataset, префикс data- удаляется из названия атрибута. Если data-атрибут содержит одно слово после префикса data-, то именно оно указывается после этого свойства с маленькой буквы (в нижнем регистре) , например, dataset.age для атрибута data-age или dataset.speciality для data-speciality. Если же в data-атрибуте содержится несколько слов, разделенные черточками (дефисами), то черточки удаляются, и свойство записывается в стиле camelCase, т.е. первое слово с маленькой буквы, а каждое следующее слово с заглавной буквы. В нашем примере так записывается  атрибут data-phone-number - он преобразуется в dataset.phoneNumber. Аналогичным образом в JavaScript записываются стилевые свойства элементов.

Обратите внимание, что в скрипте свойство dataset.name используется как для получения значения соответствующего атрибута data-name, так и для назначения этого атрибута и его значения, когда такого атрибута в разметке нет. В нашем примере это data-name. Для удаления этого атрибута в коде мы использовали оператор delete.

Методы getAttribute()/setAttribute()

Теперь давайте посмотрим, как можно использовать метод getAttribute('attribute') для получения значения data-атрибутов и метод setAttribute('attribute', 'value') для добавления data-атрибута с нужным значением. Перепишем код примера, представленного выше.

See the Pen
data-attribute JavaScript control getAttribute() method by Elen (@ambassador) on CodePen.0

В чем заключается разница? Во-первых, getAttribute() - это метод, и значение атрибута в нем передается в скобках в виде строки (т.е. в кавычках). Во-вторых,  в скобках нужно передать полное имя атрибута вместе с префиксом data-, чтобы получить значение атрибута. Т.е. для data-phone-number нужно записать getAttribute('data-phone-number'), не изменяя регистр символов и не убирая префикс data-.

Доступ к атрибутам данных с помощью jQuery. Метод data()

Конечно же, библиотека jQuery не могла обойти своим вниманием доступ и изменение data-атрибутов. Для этого в ней есть метод data(), чтобы добавить новый или изменить существующий data-атрибут, а также метод removeData() для удаления data-атрибута. Давайте рассмотрим наш пример, но в синтаксисе jQuery. Напомню, что для этого обязательно нужно сначала подключить эту библиотеку.

See the Pen
data-attribute JavaScript control getAttribute() method by Elen (@ambassador) on CodePen.0

Как нетрудно заметить, в коде метод data() используется очень часто, причем в скобках в кавычках, т.е. в строковом виде, мы указываем только название data-атрибута после черточки, без префикса data-. Для того чтобы удалить значение атрибута data-name, в коде используется метод removeData('name').

Еще хотелось бы обратить внимание на атрибут data-phone-number. Он может быть записан как с использованием черточки в виде строки data('phone-number'), так и сторокой в camelCase-синтаксисе в виде data('phoneNumber'). Попробуйте сами изменить его запись, перейдя к редактированию кода на codepen.io при нажатии кнопки .

Пример решения задачи с составными условиями и data-атрибутами

В статье "Простые задачи по JavaScript" вы можете найти задачу на составные условия, в которой нужно написать код, проверяющий ответы пользователя на 4 вопроса  и предлагающий ему определенные книги. Задачу можно решить с помощью ряда условий if...else, использования массивов объектов и методов для работы с массивами, но также можно сделать список с data-атрибутами, имеющими значение 0 или 1. А список вопросов представить с помощью нескольких флажков. Вариант решения будет таким:

See the Pen Составные условия JavaScript by Elen (@ambassador) on CodePen.0

Надеюсь, что после прочтения этой статьи у вас появились поводы использовать data-атрибуты в HTML, CSS, JavaScript/jQuery для хранения нужной вам информации.