С выходом HTML5 появилась возможность создавать свои атрибуты для любых тегов.
HTML
Атрибут начинается с data-, после тире пишем своё название. Внутри него пишем, что хотим. В коде выглядит так:
<div class="class" data-description="some">some</div>
Теперь рассмотрим как обращаться к этому атрибуту.
CSS
Есть несколько вариантов обращения.
1. Для применения стилей
div[data-description] {
color: blue;
}
color: blue;
}
2. Для вывода содержимого
С помощью второго варианта можно вывести содержимое нужного атрибута. Например, этот способ используется для вывода подсказок при наведении:
class-new:hover::after {
content: attr(data-description);
}
content: attr(data-description);
}
JavaScript
В JavaScript обращение к атрибуту происходит через метод dataset:
var el = document.getElementsByClassName('class');
var description = el.dataset.description;
var description = el.dataset.description;
Если атрибут будет называться в несколько слов, скажем так: data-description-one, то на JS для обращения к нему, слова нужно преобразовать в такой вид: descriptionOne.
Также обращаться можно так:
var el = document.getElementsByClassName('class');
var data = el.getAttribute('description');
var data = el.getAttribute('description');
Применить data атрибут:
id.setAttribute('description','добавим что нужно здесь');
jQuery
В jQuery к атрибутам обращаемся так:
var description = $('.class').data('description');
Применить:
$('.class').attr('description','добавим что нужно здесь');
