Сегодняшняя статья посвящена рассмотрению новшества в HTML5 – пользовательских атрибутов данных (data). Вы узнаете, что такое атрибуты data
, зачем они нужны, и как их можно использовать.
Очень часто разработчикам нужно хранить определенную информацию, связанную с различными элементами DOM. Зачастую такая информация больше нужна именно программистам, а не посетителям сайта. Допустим, вам нужно определять тип блока DOM (section
, footer
и т.д.) и присваивать ему идентификатор, чтобы позднее добавлять к нему определенные CSS стили.
Это легко можно сделать и с помощью атрибутов id
или class
. Но, иногда, такого решения мало. Ввиду следующих ограничений:
class
не предназначен для хранения расширенных данных. Его основная цель – присваивать CSS стили определенному набору элементов.
Чтобы решить эти задачи, в HTML5 были введены пользовательские атрибуты данных. Все атрибуты элемента, название которого начинается с data-
, являются атрибутами данных. Эти атрибуты данных можно использовать и для присвоения стилей элементам DOM.
Название атрибута данных всегда начинается с data-
. Например:
<div data-element-type="section" data-nonce="bfc9a753f7" data-id="25018"> Section </div>
Помимо префикса data-
, название допустимого пользовательского атрибута данных может содержать только латинские буквы, цифры, дефис (—), точку (.), двоеточие (:) или подчеркивание (_). Для названия нельзя использовать заглавные буквы.
Замечания по использованию атрибутов данных:
string
. Все, что может быть закодировано в виде строки, также может храниться в атрибутах данных. Если нужно выполнить преобразование типов, используйте для этого JavaScript.data-class
.
Теперь давайте перейдем к рассмотрению практического применения атрибутов данных и узнаем, как получить доступ к их значениям в CSS и JavaScript.
Вы можете использовать атрибуты данных в CSS для стилизации элементов с помощью селекторов атрибутов. Вы также можете показать информацию, хранящуюся в атрибуте данных, пользователям (во всплывающей подсказке или другим способом) с помощью функции attr()
jQuery.
Если взять пример с типами блоков, вы можете по-разному стилизовать их фоновый цвет. Пример селектора в CSS:
div[data-element-type='section'] { background: #ccc; }
Вы можете использовать всплывающие подсказки, чтобы показать пользователям некоторую дополнительную информацию, связанную с элементом. Информация, которую вы хотите показать, может храниться в атрибуте data-tooltip
.
<span data-tooltip="Пример подсказки (tooltip)">Подсказка</span>
Затем вы можете показывать эти данные пользователю с помощью псевдоэлемента ::before
.
span.tooltip::before { content: attr(data-tooltip); position: absolute; top: 25px; font-size: 15px; display: none; } span.tooltip:hover::before { display: inline-block; }
Вы можете получить доступ к атрибутам данных в JavaScript с помощью различных способов.
Способ №1: Использование getAttribute
и setAttribute
Метод getAttribute
возвращает либо пустое значение (null
), либо пустую строку, если данный атрибут не существует. Вот пример использования этого метода:
var element = document.getElementById("some-block"); var blockType = element.getAttribute("data-element-type");
Вы можете использовать метод setAttribute
, чтобы изменить значение существующих атрибутов или добавить новые атрибуты.
element.setAttribute("data-id", "newId");
Способ №2: Использование jQuery
Вы также можете использовать метод jQuery data()
для доступа к атрибутам данных элемента. До версии jQuery 1.6 использовался следующий код для доступа к атрибутам данных:
var element = $("#some-block"); var blockType = element.data("element-type"); element.data("element-type", "newData");
Начиная с версии jQuery 1.6 используется версия атрибутов данных в формате camelCase (ВерблюжийРегистр). Теперь вы можете сделать то же самое, используя следующий код:
var element = $("#some-block"); var blockType = element.data("elementType"); element.data("elementType", "newData");
В сегодняшней статье мы рассмотрели основные моменты, которые вам нужно знать об атрибутах данных (data-
) в HTML5. Помимо создания всплывающих подсказок и стилизации элементов с помощью селекторов атрибутов, вы можете использовать атрибуты данных для хранения и отображения пользователям различных данных, таких как уведомление о непрочитанных сообщениях и массы других.
Спасибо, что читаете нас!
Грехи других судить вы так усердно рветесь, начните со своих и до чужих не доберетесь… Read More
Люди, между которыми есть любовь и взаимопонимание, скрепляют отношения и зарождают новый союз, а дату… Read More
Для качественного SEO (поисковой оптимизации, раскрутки сайта) одним из важных показателей является Авторитет домена (Domain… Read More
Выяснение того, как вывести свои деньги с PayPal, является одним из первых вопросов, которыми озадачивается… Read More
Юбка – мощный элемент женского гардероба, благодаря которому любой наряд будет выглядеть потрясающе стильно и… Read More
Поисковые системы (например, Google) проверяют технические характеристики вашего сайта, такие как скорость загрузки, удобство навигации,… Read More