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


Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

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

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