В этой статье я собираюсь показать вам, как вы можете использовать пользовательские атрибуты данных HTML5. Я также собираюсь представить вам некоторые варианты использования, которые могут оказаться полезными в вашей работе в качестве разработчика.
Почему пользовательские атрибуты данных?
Очень часто нам нужно хранить информацию, связанную с различными элементами DOM. Эта информация не может быть важной для читателей, но легкий доступ к ней сделает жизнь разработчиков намного проще.
Например, предположим, у вас есть список различных ресторанов на веб-странице. До HTML5, если вы хотели хранить информацию о типе еды, предлагаемой ресторанами, или об их удаленности от посетителя, вы бы использовали атрибут class HTML. Что если вам необходимо сохранить id ресторана, чтобы увидеть, какой именно ресторан пользователь захочет посетить?
Вот несколько проблем с подходом, основанным на атрибуте класса HTML.
- Атрибут класса HTML не предназначен для хранения таких данных. Его основная цель — позволить разработчику назначить информацию о стиле набору элементов.
- Каждый дополнительный фрагмент информации требует от нас добавления нового класса в наш элемент. Это затрудняет синтаксический анализ данных в JavaScript, чтобы фактически получить то, что нам нужно.
- Допустим, имя данного класса начинается с цифр. Если позже вы решите стилизовать элементы на основе этих данных в имени класса, вам придется либо экранировать число, либо использовать селекторы атрибутов в своей таблице стилей.
Чтобы избавиться от этих проблем, HTML5 ввел пользовательские атрибуты данных . Все атрибуты элемента, имя которого начинается с data- являются атрибутами данных. Вы также можете использовать эти атрибуты данных для стилизации ваших элементов.
Далее давайте углубимся в основы атрибутов данных и узнаем, как получить доступ к их значениям в CSS и JavaScript.
Синтаксис HTML
Как я упоминал ранее, имя атрибута данных всегда начинается с data- . Вот пример:
<li data-type="veg" data-distance="2miles" data-identifier="10318"> Salad King </li>
Теперь вы можете использовать эти атрибуты данных для поиска и сортировки ресторанов для ваших посетителей. Например, теперь вы можете показать им все вегетарианские рестораны на определенном расстоянии.
Помимо префикса data, имя допустимого пользовательского атрибута данных должно содержать только буквы, цифры, дефис (-), точку (.), Двоеточие (:) или подчеркивание (_). Он не может содержать заглавные буквы.
Есть две вещи, которые вы должны учитывать при использовании атрибутов данных.
Во-первых, данные, хранящиеся в этих атрибутах, должны иметь тип string . Все, что может быть закодировано в виде строки, также может храниться в атрибутах данных. Все преобразования типов должны быть выполнены в JavaScript.
Во-вторых, атрибуты данных следует использовать только тогда, когда нет других соответствующих HTML-элементов или атрибутов . Например, неуместно хранить class элемента в атрибуте data-class .
Элемент может иметь любое количество атрибутов данных с любым желаемым значением.
Атрибуты данных и CSS
Вы можете использовать атрибуты данных в CSS для стилизации элементов с помощью селекторов атрибутов. Вы также можете показать информацию, хранящуюся в атрибуте данных, пользователям (во всплывающей подсказке или другим способом) с помощью функции attr() .
Элементы для укладки
Возвращаясь к нашему примеру с рестораном, вы можете дать пользователям подсказку о типе ресторана или его удаленности от них, используя селекторы атрибутов, чтобы по-разному стилизовать фон ресторанов. Вот пример:
li[data-type='veg'] { background: #8BC34A; } li[data-type='french'] { background: #3F51B5; }
Создание подсказок
Вы можете использовать всплывающие подсказки, чтобы показать пользователям некоторую дополнительную информацию, связанную с элементом.
Я рекомендую использовать этот метод для быстрых прототипов, а не для рабочего сайта, не в последнюю очередь потому, что подсказки только для CSS не полностью доступны .
Информация, которую вы хотите показать, может храниться в атрибуте data-tooltip .
<span data-tooltip="A simple explanation">Word</span>
Затем вы можете представить данные пользователю с помощью ::before .
span::before { content: attr(data-tooltip); // More Style Rules } span:hover::before { display: inline-block; }
Доступ к атрибутам данных с помощью JavaScript
Существует три способа доступа к атрибутам данных в JavaScript.
Использование getAttribute и setAttribute
Вы можете использовать getAttribute() и setAttribute() в JavaScript, чтобы получить и установить значение различных атрибутов данных.
Метод getAttribute возвращает либо пустое значение, либо пустую строку, если данный атрибут не существует. Вот пример использования этих методов:
var restaurant = document.getElementById("restaurantId"); var ratings = restaurant.getAttribute("data-ratings");
Вы можете использовать метод setAttribute чтобы изменить значение существующих атрибутов или добавить новые атрибуты.
restaurant.setAttribute("data-owner-name", "someName");
Использование свойства набора данных
Более простой способ доступа к атрибутам данных — с помощью свойства dataset . Это свойство возвращает объект DOMStringMap с одной записью для каждого пользовательского атрибута данных.
Есть несколько вещей, которые вы должны иметь в виду при использовании свойства dataset .
Для преобразования пользовательского атрибута данных в ключ DOMStringMap требуется три шага:
- Префикс
data-удаляется из имени атрибута - Любой дефис, за которым следует строчная буква, удаляется из имени, а буква, следующая за ним, преобразуется в прописные.
- Другие персонажи останутся без изменений. Это означает, что любой дефис, за которым не следует строчная буква, также останется неизменным.
Затем к атрибутам можно получить доступ, используя имя camelCase, хранящееся в объекте, в качестве ключа, например element.dataset.keyname .
Другой способ доступа к атрибутам — использование скобочной нотации, например element.dataset[keyname]
Рассмотрим следующий HTML:
<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName"> Salad King </li>
Вот несколько примеров:
var restaurant = document.getElementById("restaurantId"); var ratings = restaurant.dataset.ratings; restaurant.dataset.ratings = newRating; var owner = restaurant.dataset['ownerName']; restaurant.dataset['ownerName'] = 'newOwner';
Этот метод теперь поддерживается во всех основных браузерах, и вы должны предпочесть его по сравнению с предыдущим методом для доступа к пользовательским атрибутам данных.
Использование jQuery
Вы также можете использовать метод jQuery data() для доступа к атрибутам данных элемента. До версии 1.6 jQuery вам приходилось использовать следующий код для доступа к атрибутам данных:
var restaurant = $("#restaurantId"); var owner = restaurant.data("owner-name"); restaurant.data("owner-name", "newName");
Начиная с версии 1.6, jQuery начал использовать версию атрибутов данных camelCase. Теперь вы можете сделать то же самое, используя следующий код:
var restaurant = $("#restaurantId"); var owner = restaurant.data("ownerName"); restaurant.data("ownerName", "newName");
Вы должны знать, что jQuery также пытается внутренне преобразовать строку, полученную из атрибута данных, в подходящий тип, такой как числа, логические значения, объекты, массивы и нуль.
var restaurant = $("#restaurantId"); var identifier = restaurant.data("identifier"); console.log(typeof identifier); // number
Если вы хотите, чтобы jQuery получал значение атрибута в виде строки без какой-либо попытки конвертировать его в другие типы, вам следует использовать метод attr() jQuery.
jQuery извлекает значение атрибутов данных только при первом обращении к ним. Атрибуты данных больше не доступны или не изменены. Все изменения, которые вы вносите в эти атрибуты, делаются внутри и доступны только в jQuery.
Предположим, вы управляете атрибутами данных следующего элемента списка:
<li id="salad" data-type="veg" data-distance="2miles" data-identifier="10318"> Salad King </li>
Вы можете использовать код ниже, чтобы изменить значение его атрибута data-distance :
var distance = $("#salad").data("distance"); console.log(distance); // "2miles" $("#salad").data("distance","1.5miles"); console.log(distance); // "1.5miles" document.getElementById("salad").dataset.distance; // "2miles"
Как вы можете видеть, доступ к значению атрибута data-distance с помощью ванильного JavaScript (не jQuery) продолжает давать нам старый результат.
Вывод
В этом уроке я рассмотрел все важные вещи, которые вам нужно знать об атрибутах данных HTML5. Помимо создания всплывающих подсказок и элементов стиля с помощью селекторов атрибутов, вы можете использовать атрибуты данных для хранения и отображения пользователям некоторых других данных, таких как уведомление о непрочитанных сообщениях и так далее.
Если у вас есть другие вопросы по поводу атрибутов данных, дайте мне знать в комментариях.