Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

getElementById()

Встроенная функция getElementById()

Урок №3
Функция getElementById()
Встроенная функция getElementById()

В этом уроке, мы рассмотрим функцию getElementById(), более подробно.

getElementById() — это встроенная функция DOM, является методом объекта document.

Функция getElementById("значение") ищет элементы в HTML-документе, по значению их атрибута id="значение".

id="значение" — это глобальный атрибут, является уникальным идентификатором элемента, название значения мы придумываем сами.

В одном HTML-документе, нельзя использовать 2 и более одинаковых значения атрибута id. Если вы назначаете элементам страницы (HTML-тегам), атрибут id, то их значения должны быть разными.

Усовершенствуем наш пример из прошлого урока, сделаем так чтобы при нажатии на другую кнопку внешность элемента возвращалась обратно.

Для этого нам понадобиться создать еще одну кнопку и ещё одну пользовательскую функцию, они выделены красным цветом:

<script>
 function getChangeEl() {
  document.getElementById("changeEl").style.fontSize="25px";
 }
 function getDefaultEl() {
  document.getElementById("changeEl").style.fontSize="16px";
 }
</script>

<div id="changeEl">
 Изменяем внешность элемента на лету, нажав на кнопку!</div>

<input type="button" value="Кнопка" onclick="getChangeEl()" />
<input type="button" value="По-умолчанию" onclick="getDefaultEl()" />

В итоге, наша страница будет выглядеть следующим образом.

Нажав на первую кнопку, шрифт элемента увеличится. Нажав на вторую кнопку, размер шрифта элемента вернётся в исходную позицию. За это отвечает пользовательская функция getDefaultEl() которая делает шрифт элемента равным 16px.

Читать далее: Объект style

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget