Изменение CSS с помощью JavaScript HTML DOM

HTML DOM позволяет JavaScript изменять стиль HTML-элементов.

Изменение стиля HTML

Чтобы изменить стиль HTML-элемента, используйте этот синтаксис:

document.getElementById(id).style.свойство = новый стиль

В этом примере изменяется <p> Элемент стиля:

Пример

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Этот абзац был изменен скриптом.</p>
</body>
</html>

Попробуйте сами

Использование событий

HTML DOM позволяет вам выполнять код при возникновении события.

Когда "некое событие" происходит на HTML элементе, браузер генерирует событие:

  • При нажатии на элемент
  • При загрузке страницы
  • Когда изменяется поле ввода

Вы узнаете больше о событиях в следующей главе этого руководства.

В этом примере при нажатии на кнопку будет изменен стиль HTML элемента с id="id1":

Пример

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Мой заголовок 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Нажми меня!
</button>
</body>
</html>

Попробуйте сами

Больше примеров

Visibility
Как сделать элемент невидимым. Вы хотите показать элемент?

Руководство по объекту Style HTML DOM

Чтобы получить все свойства стилей HTML DOM, пожалуйста, посетите наш Руководство по объекту Style HTML DOM.