Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Свойство onload - Обработчик событий Метод setAttribute Метод getAttribute

Метод setAttribute - Добавление нового атрибута - Изменение значения атрибута

JavaScript - Практическое применение

Урок №10 Метод setAttribute

Количество просмотров: 366

Метод setAttribute позволяет изменить значение атрибута элемента страницы или добавить элементу новый атрибут.

var any = document.getElementById("...");
any.setAttribute("attribute", "value");

При помощи метода getElementById выбираем элемент страницы. Результат заносим в произвольную переменную any.
Через переменную any работаем с выбранным элементом как с объектом.

Метод setAttribute содержит 2 аргумента: имя атрибута attribute и его значение value.

Если атрибут уже существует, то его значение меняется на указанное. Если не существует, то к элементу добавляется новый атрибут с указанным значением.

Метод setAttribute - Добавление нового атрибута

Метод 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", "java_red");

</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 со значением java_red.
  • html-код выглядит вот так:

    <p id="mars" class="java_red">Mars is red planet</p>

  • Таким образом, для выбранного элемента страницы мы задали стилевое оформление: и теперь текст параграфа выделен красным цветом.

Метод setAttribute - Изменение значения атрибута

Метод setAttribute - Изменение значения атрибута

Продолжаем работать с текущим примером и теперь при помощи метода setAttribute изменим значение атрибута того же элемента страницы: параграфа с индексом id="mars".

<body>

<h1>Our Planet</h1>

<p id="earth">Green Planet</p>

<h1>Red Planet</h1>

<p id="mars" class="java_red">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 Метод setAttribute Метод getAttribute

Ваши комментарии к уроку:

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

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru