HTML5 в своем стандарте принес немало нового, и одним из таких новшеств стала возможность добавлять любые пользовательские атрибуты в разметку страницы с использованием волшебной приставки, или префикса data-
, т.е. данные. Причем использовать эти данные вы можете как в CSS, так и в JavaScript.
Использование data-атрибутов в HTML и CSS
Для того чтобы записать data-атрибуты в HTML, не нужно придумывать ничего нового. Поскольку это стандартный для HTML5 атрибут, то в любом открывающем теге вы ставите пробел после названия этого тега или другого атрибута, записываете обязательный префикс data-
и добавляете любое слово, связанное по смыслу с тем значением, которое вы хотите в этот атрибут поместить.
Например, атрибуты data-text-top
и data-text-bottom
в разметке ниже нужны для того, чтобы использовать текст в них сверху и снизу в выезжающих при наведении на фото псевдоэлементах ::before и ::after, соответственно.
1 2 3 4 5 6 7 8 | <div class="team-member"> <div class="team-img" data-text-top="17 years" data-text-bottom="of experience"> <img src="https://source.unsplash.com/LrS0c_v30RQ/330x400" alt=""> </div> <h3>Nick Borrow</h3> <div class="speciality">Founder</div> <p>Debitis dolorem nam magnam distinctio in, tempore, sapiente recusandae.</p> </div> |
Результат использования data-атрибутов в HTML и CSS можно посмотреть ниже. Для этого нужно навести курсор мыши на любое изображение.
See the Pen by Elen (@ambassador) on CodePen.
Работу этого кода невозможно представить без использования свойства transition для анимации при наведении на картинку или блок. Плюс для свойства content
, обязательного для псевдоэлементов ::before и ::after, можно задать функцию attr(data-text-top)
, указав в скобках любой data-
или другой атрибут вместо data-text-top
.
Использование data-атрибутов в JavaScript и jQuery.
Однако, это еще не все. В том случае, когда часть информации должна быть некоторое время скрыта от пользователя, очень легко ее спрятать в data-атрибуты, а затем "вытащить" с помощью JavaScript или jQuery. Именно так поступают разработчики многих плагины фотогалерей или слайдеров. Например, чтобы добавить просмотр изображения в модальном окне в фотогалерее Fancybox, нужно в разметке указать атрибут data-fancybox
, а атрибут data-caption
используется для вывода заголовка под изображением:
1 2 3 4 5 6 7 8 | <div class="my-gallery"> <a href="https://source.unsplash.com/F88jkCoSVx0/900x600" data-fancybox="mygallery" data-caption="Wooman on the Beach"> <img src="https://source.unsplash.com/F88jkCoSVx0/300x200" alt="Wooman on the Beach" /> </a> <a href="https://source.unsplash.com/D3cC-j2-pP4/600x900" data-fancybox="mygallery" data-caption="Mayamy Beach"> <img src="https://source.unsplash.com/D3cC-j2-pP4/300x200" alt="Mayamy Beach" /> </a> </div> |
И это все, что нужно сделать для работы плагина, не считая подключения файлов 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.
В каждый элемента <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.
В чем заключается разница? Во-первых, 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.
Как нетрудно заметить, в коде метод 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.
Надеюсь, что после прочтения этой статьи у вас появились поводы использовать data-атрибуты в HTML, CSS, JavaScript/jQuery для хранения нужной вам информации.