Как Заменить в атрибуте javascript
"Как Заменить в атрибуте значение" элемента, все способы замены в атрибуте! И почти одинаковое звучаение "Заменить атрибут" в том смысле, что заменить сам атрибут! Пример/ы замены в атрибуте js.
Подробно о замене атрибутов в javascript
- Заменить в атрибуте через тег.
- Заменить в атрибуте через тег №2.
- Заменить в атрибуте через другой атрибут.
- Заменить сам атрибут.
Заменить в атрибуте через тег.
Для того, чтобы "Заменить в атрибуте через тег" вам понадобится живой пример :
Придумаем произвольный тег "changeattr":
Для замены значения в атрибуте будем использовать атрибут class.
Создадим два класса, первый цвет будет синий. А второй красный:
<style>
.example{color:blue;}
.change_attribute_1{color:red;}
</style>
Чтобы создать живой пример замены в атрибуте используем:
Кнопку button.
Туда же добавляем id, чтобы обратиться к кнопке(обратиться к тегу)...
Тег script.
+ onclick
В функцию помещаем getelementsbytagname.
Поскольку наш тег один, поэтому ячейку ставим 0:
И относительно данного атрибута вам понадобится className.
Соберем весь код:
Код как Заменить в атрибуте через тег.
Html:
<changeattr class="example">Замени значение в атрибуте через тег.</changeattr>
<button id="button_1">Замени в атрибуте с помощью кнопки:</button>
Javascript:
<script>
button_1.onclick = function()
{
document.getElementsByTagName( "changeattr" )[0].className = "change_attribute_1";
}
</script>
Css :
<style>
.example{color:blue;}
.change_attribute_1{color:red;}
</style>
Выполнение Кода замены в атрибуте через тег.
Чтобы увидеть живой пример замены в атрибуте - нажмите на кнопку "Замени в атрибуте с помощью кнопки:". Если код написан правильно, то вы получите:
Первоначальное значение в атрибуте : example
После замены...
Замененное значение атрибута "change_attribute_1".
Заменить в атрибуте через тег №2.
Для того, чтобы во втором примере Заменить в атрибуте вам понадобится:
Теория и код из выше идущего пункта!
Немного изменим :
Два элемента будут button.
<button id="get_from_attribute">В данном теге есть атрибут, из которого будем получать через тег №2.</button>
<button id="button_2">Заменить в атрибуте через тег №2.</button>
У каждого новый(уникальный) id и к нему же будем обращаться! Если код написан правльно, то вы получите - "get_from_attribute".
В нашем примере... наша кнопка "button" идет по счету сверху страницы под номером 2. Как вы знаете отчет идет с нуля... поэтому наша двойка это - [1](Как узнать сколько элементов на странице - нужно заменить и вывести в консоль htmlcollection).
Далее поступаем аналогично, как ив предыдущем пункте...
Первым пунктом выведем первоначальное значение атрибута используя alert.
Вторым пунктом - заменим значение атрибута на новое.
А третьим - получим замененное значение атрибута...
Соберем весь код:
Код как Заменить в атрибуте через тег.
Html:
<button id="get_from_attribute">В данном теге есть атрибут, из которого будем получать через тег №2.</button>
<button id="button_2" class=width_100>Заменить в атрибуте через тег №2.</button>
Javascript:
<script>
button_2.onclick = function()
{
alert( document.getElementsByTagName( "button" )[1].id);
document.getElementsByTagName( "button" )[1].id = "change_attribute_2";
alert( document.getElementsByTagName( "button" )[1].id);
}
</script>
Выполнение Кода замены в атрибуте через тег.
Чтобы увидеть живой пример замены в атрибуте - нажмите на кнопку "Замени в атрибуте с помощью кнопки:". Если код написан правильно, то вы получите :
При первом alert - "get_from_attribute".
После замены значения в атрибут
Вы получаете новое замененное уже значение из атрибута №3 - change_attribute_2
Заменить в атрибуте через другой атрибут.
Для того, чтобы Заменить в атрибуте с помощью другого атрибута :
Как вы знаете нужны самостоятельные атрибуты - их используем чтобы обратиться к тегу.
А уже потом обращаемся к вашему атрибуту...
Для примера замены в атрибуте через другой атрибут вам понадобится:
Теория и код из выше приведенных примеров... с некоторыми изменениями:
Кнопка button(первым тегом) - больше не нужна - используем - span.
В него поместим атрибут, к которому будем обращаться - "
Опять в каждом теге изменим id
В третьем пункте повторяю третий раз... выводим первым alert-ом первоначальное значение атрибута : "атрибут через другой атрибут"...
Вторым действием заменяем значение в атрибуте...
И третьим действием получаем и выводим через alert - замененное значение : "Измененное значение в атрибуте!".
Соберем весь код:
Код как Заменить в атрибуте через атрибут.
Html:
<span id="id_e" title="атрибут через другой атрибут">Здесь текст.</span>
<button id="idbutton_3" class=width_100>Заменить в атрибуте через другой атрибут</button>
Javascript:
<script>
idbutton.onclick = function()
{
alert( id_e.title );
id_e.title = "Измененное значение в атрибуте!";
alert( id_e.title );
}
</script>
Выполнение Кода замены в атрибуте через атрибут.
Чтобы увидеть живой пример замены в атрибуте - нажмите на кнопку "Замени в атрибуте с помощью кнопки:". Если код написан правильно, то вы получите :
Первый alert : "атрибут через другой атрибут"...
Вторым действием заменяем значение в атрибуте...
Третье действие : alert - замененное значение : "Измененное значение в атрибуте!".
Заменить сам атрибут.
Если вам требуется заменить сам атрибут... например заменить атрибут:
На атрибут
Или наоборот... алгоритм действий такой:
Находим один из способов "обратиться к тегу".
Далее нужно найти способ удаления заменяемого атрибута.
И далее любым из способов добавляем атрибут!
В связи с тем, что... некоторые пользователи имеют отклонения от нормы... комменты закрыты до момента, как напишу скрипт, когда будут доступны только зарегистрированным, либо будет модерация комментов...
Свободно, комменты оставить более не получится!
Этим вы очень поможете проекту! Заранее огромное спасибо!
