«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Метод 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 было изменено значение атрибута для выбранного элемента страницы.

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


JavaScript и Web
Последние заметки
Популярные заметки