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

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

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

HTML

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

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

CSS

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

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

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

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

JavaScript

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

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

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

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

jQuery

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

Применить:

Метки:

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

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

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

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