СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (133)
css (96)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (17)
board (17)
hosting (17)
html book (17)
Показать еще :
svg (16)
js method (16)
php file (15)
ruweb.net (15)
color (14)
osclass (13)
htaccess (13)
path (12)
table (12)
input (11)
icon (11)
info (11)
online (11)
yandex (11)
php date (11)
notepad (11)
js delete (11)
php img (10)
url (10)
jsphp (10)
form (8)
task (7)
cookie (7)
comment (7)
php url (7)
click (6)
ftp (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
bbcode (4)
js form (4)
select (4)
search (4)
js copy (4)
vk (3)
captcha (3)
js time (3)
iframe (3)
vs code (3)
sitemap (2)
js post (2)
browser (2)
console (2)
seo (2)
tag hr (2)
ukoz (2)
header (1)
archive (1)
smile (1)
numbers (1)
ssl (1)
books (1)

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

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

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

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

  1. Что такое "Атрибут 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" несправедливо обойдет вниманием! Поэтому. смысла делать отдельные страницы нет. Объединим в одну.


  2. Как добавить атрибут дата(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) любому тегу.
    Как добавить атрибут дата(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"


  3. Как изменить атрибут дата(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 в коде? Для этого откройте код дива с помощью исследовать элемент, выше я уже приводил скрин:

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
    Пример замены значения атрибута data по клику.
    Пример замены значения атрибута data по клику.
    Здесь див с id="id_div_1"


  4. Удаляем атрибут дата(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"


  5. Получение и вывод данных из атрибута 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 - нажми на кнопку...

    здесь.... текст...


  6. Получение данных из атрибута 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
изменить атрибут data
добавить атрибут data
удалить атрибут data

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.