"Как Заменить в атрибуте значение" элемента, все способы замены в атрибуте! И почти одинаковое звучаение "Заменить атрибут" в том смысле, что заменить сам атрибут! Пример/ы замены в атрибуте 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 - замененное значение : "Измененное значение в атрибуте!".
Заменить сам атрибут.
Если вам требуется заменить сам атрибут... например заменить атрибут:
На атрибут
Или наоборот... алгоритм действий такой:
Находим один из способов "обратиться к тегу".
Далее нужно найти способ удаления заменяемого атрибута.
И далее любым из способов добавляем атрибут!
