Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 11.11.2024)
710660
солдат
369
самолетов
329
вертолетов
9253
танков
18766
ББМ
20314
артиллерия
996
ПВО
1245
РСЗО
28802
машин
28
корабли и катера
Что такое пользовательские атрибуты данных (data) в HTML5 и как их использовать
Опубликовано Обновлено: 22.07.2019

Что такое пользовательские атрибуты данных (data) в HTML5 и как их использовать

 

 

Сегодняшняя статья посвящена рассмотрению новшества в HTML5 – пользовательских атрибутов данных (data). Вы узнаете, что такое атрибуты data, зачем они нужны, и как их можно использовать.

 

 

Зачем нужны пользовательские атрибуты данных?

Очень часто разработчикам нужно хранить определенную информацию, связанную с различными элементами DOM. Зачастую такая информация больше нужна именно программистам, а не посетителям сайта. Допустим, вам нужно определять тип блока DOM (section, footer и т.д.) и присваивать ему идентификатор, чтобы позднее добавлять к нему определенные CSS стили.

Это легко можно сделать и с помощью атрибутов id или class. Но, иногда, такого решения мало. Ввиду следующих ограничений:

  • Атрибут class не предназначен для хранения расширенных данных. Его основная цель – присваивать CSS стили определенному набору элементов.
  • Если нам нужен дополнительный объем информации, мы вынуждены добавлять новый класс к элементу. Это может затруднять синтаксический анализ данных в JavaScript.
  • Если имя класса начинается с цифр, позже это затруднит присвоение стилей, поскольку придется либо экранировать числа, либо использовать другие селекторы атрибутов в таблице стилей.

 

Чтобы решить эти задачи, в HTML5 были введены пользовательские атрибуты данных. Все атрибуты элемента, название которого начинается с data-, являются атрибутами данных. Эти атрибуты данных можно использовать и для присвоения стилей элементам DOM.

 

 

Синтаксис пользовательских атрибутов данных в HTML5

Название атрибута данных всегда начинается с data-. Например:

<div data-element-type="section" data-nonce="bfc9a753f7" data-id="25018">
  Section
</div>

 

Помимо префикса data-, название допустимого пользовательского атрибута данных может содержать только латинские буквы, цифры, дефис (), точку (.), двоеточие (:) или подчеркивание (_). Для названия нельзя использовать заглавные буквы.

 

Замечания по использованию атрибутов данных:

  • Во-первых, данные, хранящиеся в этих атрибутах, должны иметь тип string. Все, что может быть закодировано в виде строки, также может храниться в атрибутах данных. Если нужно выполнить преобразование типов, используйте для этого JavaScript.
  • Во-вторых, атрибуты данных должны использоваться только тогда, когда нет других соответствующих HTML-элементов или атрибутов. Например, неуместно хранить класс элемента в атрибуте data-class.
  • В-третьих, элемент может содержать любое количество атрибутов данных с любым допустимым значением.

 

 

Теперь давайте перейдем к рассмотрению практического применения атрибутов данных и узнаем, как получить доступ к их значениям в CSS и JavaScript.

 

 

Доступ к атрибутам данных в CSS

Вы можете использовать атрибуты данных в CSS для стилизации элементов с помощью селекторов атрибутов. Вы также можете показать информацию, хранящуюся в атрибуте данных, пользователям (во всплывающей подсказке или другим способом) с помощью функции attr() jQuery.

Если взять пример с типами блоков, вы можете по-разному стилизовать их фоновый цвет. Пример селектора в CSS:

div[data-element-type='section'] {
  background: #ccc;
}

 

 

Создание всплывающих подсказок с атрибутом data

Вы можете использовать всплывающие подсказки, чтобы показать пользователям некоторую дополнительную информацию, связанную с элементом. Информация, которую вы хотите показать, может храниться в атрибуте 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

Вы можете получить доступ к атрибутам данных в 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. Помимо создания всплывающих подсказок и стилизации элементов с помощью селекторов атрибутов, вы можете использовать атрибуты данных для хранения и отображения пользователям различных данных, таких как уведомление о непрочитанных сообщениях и массы других.

Спасибо, что читаете нас!

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Быстрый доступ по сайту SebWeo
Угости меня кофе