Далее на странице...
Метод setAttribute в JavaScript позволяет изменить значение атрибута элемента страницы или добавить элементу новый атрибут.
var any = document.getElementById("...");
any.setAttribute("attribute", "value");
При помощи метода getElspanentById выбираем элемент страницы. Результат заносим в произвольную переменную any.
Через переменную any работаем с выбранным элементом как с объектом.
Метод setAttribute содержит 2 аргумента: имя атрибута attribute и его значение value.
Если атрибут уже существует, то его значение меняется на указанное. Если не существует, то к элементу добавляется новый атрибут с указанным значением.
Метод setAttribute - Добавление нового атрибута
Рассмотрим пример из предыдущей заметки, где мы работали с планетами, и теперь при помощи метода setAttribute добавим к одному из элементов страницы новый атрибут.
<body>
<h1>Our Planet</h1>
<p id="earth">Green Planet</p>
<h1>Red Planet</h1>
<p id="mars">Mars is red planet</p>
<script type="text/javascript">
var planet = document.getElementById("mars");
planet.setAttribute("class", "programm_red_17");
</script>
</body>
Our Planet
Green Planet
Red Planet
Mars is red planet
Метод setAttribute - Добавление нового атрибута
Our Planet
Green Planet
Red Planet
Mars is red planet
Комментарии к примеру.
-
При помощи метода getElementById получаем доступ к элементу страницы с индексом id="mars" (это последний параграф - тег p).
-
Далее при помощи метода setAttribute добавляем для данного параграфа новый атрибут class со значением programm_red_17.
-
Таким образом, для выбранного элемента страницы мы задали стилевое оформление: и теперь текст параграфа выделен красным цветом.
html-код выглядит вот так:
<p id="mars" class="programm_red_17">Mars is red planet</p>
Метод setAttribute - Изменение значения атрибута
Продолжается работа с текущим примером и теперь при помощи метода setAttribute изменится значение атрибута того же элемента страницы: параграфа с индексом id="mars".
<body>
<h1>Our Planet</h1>
<p id="earth">Green Planet</p>
<h1>Red Planet</h1>
<p id="mars" class="programm_red_17">Mars is red planet</p>
<script type="text/javascript">
var planet = document.getElementById("mars");
planet.setAttribute("class", "java_orange");
</script>
</body>
Метод setAttribute - Изменение значения атрибута
Our Planet
Green Planet
Red Planet
Mars is red planet
Комментарии к примеру.
-
На этот раз при помощи метода setAttribute было изменено значение атрибута для выбранного элемента страницы.
