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

Admin CSS, HTML, JavaScript Обсудить

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

HTML

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

<div class="class" data-description="Facebook">Facebook</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"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>