Как обратиться к атрибуту data.

"Как обратиться к атрибуту data". Или Обратиться к значению атрибута data. Обратимся к атрибуту data в теге. Обязательно живой пример!

Подробно об обращении к атрибуту data

1. Как обратиться к "Атрибуут data" по клику на тег?
2. Как обратиться к "Атрибут 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 нажмите по тегу с текстом:

Обращаемся к атрибуту дата по клику на тег!
Обращаемся к атрибуту дата по клику на тег!
[kod]



Как обратиться к "Атрибуут data"?

Для того, чтобы " Обратиться к атрибуту data" вам понадобится:

Тег внутри которого будем обращаться к атрибуту "data" - пусть это будет div, чтобы обратиться к тегу вам нужен идентификатор - используем id:

<div id="hey_data_value" data-color="red">Это тег где будем обращаться к атрибуту data</div>

Чтобы пример был живым, будем обращаться к атрибуту по нажатию на кнопку - button, также чтобы обратиться к тегу используем id в кнопке.

+ Добавлю стилей к атрибуту data, чтобы было видно атрибут data, сделаем его красного цвета...

С html разобрались, теперь давайте перейдем к:
Javascript

Используем 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>

Пример работы кода обращения к атрибуту data:

Это тег где будем обращаться к атрибуту data
Обратись к атрибуту data