"Как обратиться к атрибуту data". Или Обратиться к значению атрибута data. Обратимся к атрибуту data в теге. Обязательно живой пример!
Подробно об обращении к атрибуту data
Как обратиться к "Атрибут data" по клику на тег?
Предположим, что у вас стоит задача обратиться к тегу с data атрибутом и нужно кликнув по этому тегу... обратиться к атрибуту data... для этого вам понадобится:
Тег внутри которого атрибут "data" - пусть это будет div в него помещает атрибут data:
+ Используем onclick.
В onclick, чтобы увидеть живое Обращение к атрибуту "data" вставляем alert c dataset.
Добавим стилей... пусть наш тег с data атрибутом отличается от всех соседних!
Соберем весь код:
Код обращения к атрибуту data по клику на тег:
Html + js:
<div onclick ="alert(this.dataset.color)" data-color="hey_data">Обращаемся к атрибуту дата по клику на тег!</div>
Style:
<style>
[data-color=hey_data]{
color:#6e00ff;
}
</style>
Пример обращения к атрибуту data по клику на тег.
Для того, чтобы Обратиться к атрибуту data нажмите по тегу с текстом:
Обращаемся к атрибуту дата по клику на тег!Как обратиться к "Атрибуут data"?
Для того, чтобы " Обратиться к атрибуту data" вам понадобится:
Тег внутри которого будем обращаться к атрибуту "data" - пусть это будет div, чтобы обратиться к тегу вам нужен идентификатор - используем id:
Чтобы пример был живым, будем обращаться к атрибуту по нажатию на кнопку - button, также чтобы обратиться к тегу используем id в кнопке.
+ Добавлю стилей к атрибуту data, чтобы было видно атрибут data, сделаем его красного цвета...
С html разобрались, теперь давайте перейдем к:Используем onclick.
В функцию вставляем dataset.
+ для того, чтобы увидеть, что мы правильно обратились к атрибуту data используем "alert"
Соберем весь код:
Код обращения к атрибуту data:
Html:
<div id="hey_data_value" data-color="red">Это тег где будем обращаться к атрибуту data</div>
<button id="hey_data_attr">Обратись к атрибуту data</button>
Javascript :
<script>
hey_data_attr.onclick = function(){
alert(hey_data_value.dataset.color) ;
}
</script>
Css :
<style>
[data-color=red]{
color:red;
}
</style>
