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