phpjsJqueryhtmlcssblog

добавить/изменить/удалить атрибут data или значение

Как добавить атрибут data или изменить атрибут data, а потом и удалить атрибут data или значение атрибута data. Поскольку страница называется "Атрибут data", то и дадим определение, что такое атрибут data.

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

1. Что такое "Атрибут data"?
2. Как добавить атрибут дата(data) любому тегу.
3. Как изменить атрибут дата(data) внутри тега.
4. Удаляем атрибут дата(data) внутри тега.
5. Получение и вывод данных из атрибута data через другой атрибут.
6. Получение данных из атрибута data с помощью функции.

Скопировать ссылку



Что такое "Атрибут data"?

"Атрибут data" - является одним из атрибутов элемента "html". Располагается внутри тега, например;
<div data-example="value">текст</div> Где :

"data" - название, идентификатор атрибута.

"example" - дополнительный флаг(второй идентификатор) атрибута.

"value" - значение "атрибута data".

Использование "Атрибут data"

На отдельной странице рассказал, как можно прикрепить стили к атрибуту data

Вообще, данная страница задумалась потому, что я решил сделать очередной DW блок. Весь блок будет сделан на "атрибутах data"

+ Отдельная тема : список страниц об атрибуте data

Почему данная страница находится в папке JS?

Казалось бы... речь идет об атрибуте HTML, и данная страница должна быть в папке HTML.

https://dwweb.ru/page/js/atribut_data.html

Но она находится в папке "JS" - потому, что главная ценность данного атрибута не в его "HTML" сущности, а в его способностях взаимодействовать с "js"

Почему объединены сразу три темы в одной?

Я бы даже сказал, что объединены не три а больше тем на одной странице:

Как добавить атрибут data

Изменить атрибут data, а потом и

Удалить атрибут data

И работа со значением атрибута data.

Почему?

Существует некий "main strim" - "главные тенденции". Они везде, и в том числе, и в программировании.

Так вот...

"атрибут data" несправедливо обойдет вниманием! Поэтому. смысла делать отдельные страницы нет. Объединим в одну.

Скопировать ссылку



Как добавить атрибут дата(data) любому тегу.

Самое первое, что мы должны уметь сделать, это:

Обратиться к тегу.

И самый простой из всех этих способов, обратиться к тегу если у него есть id

Чтобы мы могли увидеть реальное появление data атрибута - сделаем добавление атрибута data по нажатию на кнопку...

Далее...

Нам понадобится:

div с id

<div id="id_div">Здесь див с id="id_div"</div>

Далее нам потребуется кнопка button с id

<button id="id_button">Нажми на меня - добавь атрибут data с красным цветом</button>

Теперь нам потребуется скрипт с onclick и setAttribute, внутрь помещаем data атрибут, ну например... "data-color" со значением "red"

<script>id_button.onclick = function(){id_div.setAttribute('data-color', 'red');}</script>

И чтобы мы могли увидеть добавление атрибута... один из способов добавить стили к данному атрибуту data :

<style>
[data-color=red]{
color:red;
}
</style>


Второй вариант - это открыть исследовать элемент на том блоке, куда будет добавляться атрибут data и нажать кнопку добавить атрибут data.

Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!



Соберем весь код добавления атрибута data вместе:

HTML :
Куда будем добавлять атрибут data.
<div id="id_div">Здесь див с id="id_div"</div>
Кнопка:
<button id="id_button">Нажми на меня - добавь атрибут data с красным цветом</button>
JS :
<script>id_button.onclick = function(){id_div.setAttribute('data-color', 'red');}</script>
CSS :
<style>
[data-color=red]{
color:red;
}
</style>


Результат добавления атрибута data

Для того, чтобы добавить атрибут data нашему тегу прямо сейчас - нажмите на кнопку "добавить атрибут data"


Пример добавления атрибута data

Здесь див с id="id_div"
Нажми на меня - добавь атрибут data с красным цветом
Скопировать ссылку



Как изменить атрибут дата(data) внутри тега.

Надеюсь... вы разобрались с первым пунктом "добавления атрибута data тегу"!
Когда я написал - "Как изменить атрибут дата(data) внутри тега" - это имеется ввиду изменение значения атрибута data!


Повторим ранее приведенный приведенный код с измененными id? ко всем выше повторяющимся id добавим "_1"(css не буду повторять):

<div id="id_div_1">Здесь див с id="id_div_1"</div>
<button id="id_button_1">Нажми на меня - добавь атрибут data с красным цветом</button>
<script>id_button_1.onclick = function(){id_div_1.setAttribute('data-color', 'red');}</script>


И следующим шагом добавим еще одну кнопку и скрипт, с новыми стилями...:

<button id="id_button2">Замени значение атрибута data с другим цветом</button>
<script>id_button2.onclick = function(){id_div_1.setAttribute('data-color', 'yellow');}</script>
<style>
[data-color=yellow]{
color:yellow;
}
</style>


Первой кнопкой и первым скриптом - мы "добавим атрибут data тегу", а второй кнопкой и вторым скриптами, мы заменим одно значение "red" атрибута data на другое "yellow".

Пример замены значения атрибута data по клику.

Для того, чтобы заменить значение атрибута data нажмите первую кнопку и вторым нажатие нажмите вторую кнопку...

Как посмотреть изменение значение атрибута data в коде? Для этого откройте код дива с помощью исследовать элемент, выше я уже приводил скрин:

Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!



Здесь див с id="id_div_1"
Нажми на меня - добавь атрибут data с красным цветом Замени значение атрибута data с другим цветом
Скопировать ссылку



Удаляем атрибут дата(data) внутри тега.

Теперь удалим атрибут дата(data) внутри тега.


Для этого нам потребуется... опять div с id + поместим в него атрибут data (data-color="red")

<div id="id_div_2" data-color="red">Здесь див с id="id_div_2"</div>

Опять кнопка... button :

<button id="id_button_2">Удали атрибут data</button>

Далее нам понадобится функция removeAttribute Повторим аналогичный скрипт, что писали выше, только одну функцию поменяем на другую и удалим второй элемент функции(value)

<script>id_button_2.onclick = function(){id_div_2.removeAttribute('data-color');}</script>

Соберем весь код удаления атрибута data вместе:

<div id="id_div_2" data-color="red">Здесь див с id="id_div_2"</div>

<button id="id_button_2">Удали атрибут data</button>

<script>id_button_2.onclick = function(){id_div_2.removeAttribute('data-color');}</script>

<style>

[data-color=red]{

color:red;

}

</style>

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

Выше приведенный код удаления атрибута data разместим здесь, вам только остается удалить атрибут data:

Здесь див с id="id_div_2"
Удали атрибут data
Скопировать ссылку



Получение и вывод данных из атрибута data через другой атрибут.

Один из старых абзацев, который перекочевал с другой страницы... единственное отличие от выше приведенных примеров → здесь мы обращаемся к тегу через класс.

Теперь будем получать данные из атрибута data , а обращаться будем к тегу через класс.

Создадим новый блок с нашим атрибутом data
<div data-user="Вася Пупкин" class="class_1">здесь.... текст...</div>

Не будем подробно останавливаться на скриптах, вот тут мы много про onclick написали и про то как обратиться к тегу

далее опять кнопка... + скрипт -> единственное, что здесь надо уточнить, что мы используем метод dataset к обращение к атрибуту data-user(первая часть атрибута(data-) и тире отбрасывается, поэтому dataset.user, а не dataset.data-user )


<button id="button_id_2">нажми</button>

<script>

button_id_2.onclick = function(){

alert(document.getElementsByClassName("class_1")[0].dataset.user);

};

</script>

Чтобы получить данные в атрибуте data - нажми на кнопку...

здесь.... текст...
нажми
Скопировать ссылку



Получение данных из атрибута data с помощью функции.

Ну и на последок получим данные из атрибута data с помощью функции "getAttribute".

Здесь в коде, вам уже должно быть все известно, только теперь выведем содержание атрибута data с помощью alert

<div id="id_div_3" data-text="здесь текст">Здесь див без id</div>

<button id="id_button_3">Удали атрибут data</button>

<script>id_button_3.onclick = function(){alert(id_div_3.getAttribute('data-text'));}</script>

Пример вывода содержания атрибута data:

Здесь див с атрибутом data-text="здесь текст"
Получи содержание атрибута data

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

---