Data атрибуты в HTML для CSS, JavaScript, jQuery

Admin CSS, HTML, JavaScript

С выходом HTML5 появилась возможность создавать свои атрибуты для любых тегов.

HTML

Атрибут начинается с data-, после тире пишем своё название. Внутри него пишем, что хотим. В коде выглядит так:

<div class="class" data-description="some">some</div>

Теперь рассмотрим как обращаться к этому атрибуту.

CSS

Есть несколько вариантов обращения.

1. Для применения стилей

div[data-description] {
  color: blue;
}

2. Для вывода содержимого

С помощью второго варианта можно вывести содержимое нужного атрибута. Например, этот способ используется для вывода подсказок при наведении:

class-new:hover::after {
  content: attr(data-description);
}

JavaScript

В JavaScript обращение к атрибуту происходит через метод dataset:

var el = document.getElementsByClassName('class');
var description = el.dataset.description;

Если атрибут будет называться в несколько слов, скажем так: data-description-one, то на JS для обращения к нему, слова нужно преобразовать в такой вид: descriptionOne.

Также обращаться можно так:

var el = document.getElementsByClassName('class');
var data = el.getAttribute('description');

Применить data атрибут:

id.setAttribute('description','добавим что нужно здесь');

jQuery

В jQuery к атрибутам обращаемся так:

var description = $('.class').data('description');

Применить:

$('.class').attr('description','добавим что нужно здесь');
Метки:

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

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

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Data атрибуты в HTML для CSS, JavaScript, jQuery"