добавить/изменить/удалить атрибут data или значение
Подробно об атрибуте data
- Что такое "Атрибут data"?
- Как добавить атрибут дата(data) любому тегу.
- Как изменить атрибут дата(data) внутри тега.
- Удаляем атрибут дата(data) внутри тега.
- Получение и вывод данных из атрибута data через другой атрибут.
- Получение данных из атрибута data с помощью функции.
Что такое "Атрибут data"?
"Атрибут data" - является одним из атрибутов элемента "html". Располагается внутри тега, например;"data" - название, идентификатор атрибута.
"example" - дополнительный флаг(второй идентификатор) атрибута.
"value" - значение "атрибута data".
Использование "Атрибут data"
На отдельной странице рассказал, как можно прикрепить стили к атрибуту data
Вообще, данная страница задумалась потому, что я решил сделать очередной DW блок. Весь блок будет сделан на "атрибутах data"
+ Отдельная тема : список страниц об атрибуте data
Почему данная страница находится в папке JS?
Казалось бы... речь идет об атрибуте HTML, и данная страница должна быть в папке HTML.
Но она находится в папке "JS" - потому, что главная ценность данного атрибута не в его "HTML" сущности, а в его способностях взаимодействовать с "js"
Почему объединены сразу три темы в одной?
Я бы даже сказал, что объединены не три а больше тем на одной странице:
Как добавить атрибут data
Изменить атрибут data, а потом и
Удалить атрибут data
И работа со значением атрибута data.
Существует некий "main strim" - "главные тенденции". Они везде, и в том числе, и в программировании.
Так вот...
"атрибут data" несправедливо обойдет вниманием! Поэтому. смысла делать отдельные страницы нет. Объединим в одну.Как добавить атрибут дата(data) любому тегу.
Самое первое, что мы должны уметь сделать, это:
И самый простой из всех этих способов, обратиться к тегу если у него есть id
Чтобы мы могли увидеть реальное появление data атрибута - сделаем добавление атрибута data по нажатию на кнопку...
Нам понадобится:
Далее нам потребуется кнопка button с id
Теперь нам потребуется скрипт с onclick и setAttribute, внутрь помещаем data атрибут, ну например... "
И чтобы мы могли увидеть добавление атрибута... один из способов добавить стили к данному атрибуту data :
[data-color=red]{
color:red;
}
</style>
Второй вариант - это открыть исследовать элемент на том блоке, куда будет добавляться атрибут data и нажать кнопку добавить атрибут data.
Соберем весь код добавления атрибута data вместе:
Куда будем добавлять атрибут data.
JS :
[data-color=red]{
color:red;
}
</style>
Результат добавления атрибута data
Для того, чтобы добавить атрибут data нашему тегу прямо сейчас - нажмите на кнопку "добавить атрибут data"Пример добавления атрибута data
Как изменить атрибут дата(data) внутри тега.
Надеюсь... вы разобрались с первым пунктом "добавления атрибута data тегу"!Когда я написал - "Как изменить атрибут дата(data) внутри тега" - это имеется ввиду изменение значения атрибута data!
Повторим ранее приведенный приведенный код с измененными id? ко всем выше повторяющимся id добавим "_1"(css не буду повторять):
<button id="id_button_1">Нажми на меня - добавь атрибут data с красным цветом</button>
<script>id_button_1.onclick = function(){id_div_1.setAttribute('data-color', 'red');}</script>
И следующим шагом добавим еще одну кнопку и скрипт, с новыми стилями...:
<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 в коде? Для этого откройте код дива с помощью исследовать элемент, выше я уже приводил скрин:
Удаляем атрибут дата(data) внутри тега.
Теперь удалим атрибут дата(data) внутри тега.Для этого нам потребуется... опять div с id + поместим в него атрибут data (data-color="red")
Опять кнопка... button :
Далее нам понадобится функция removeAttribute Повторим аналогичный скрипт, что писали выше, только одну функцию поменяем на другую и удалим второй элемент функции(value)
Соберем весь код удаления атрибута 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:
Получение и вывод данных из атрибута data через другой атрибут.
Один из старых абзацев, который перекочевал с другой страницы... единственное отличие от выше приведенных примеров → здесь мы обращаемся к тегу через класс.
Теперь будем получать данные из атрибута data , а обращаться будем к тегу через класс.
Создадим новый блок с нашим атрибутом dataНе будем подробно останавливаться на скриптах, вот тут мы много про onclick написали и про то как обратиться к тегу
далее опять кнопка... + скрипт -> единственное, что здесь надо уточнить, что мы используем метод<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:
Сообщение системы комментирования :
Форма пока доступна только админу... скоро все заработает...надеюсь...
