HTML DOM позволяет JavaScript изменять стиль HTML элементов.
Синтаксис:
document.getElementById(id).style.свойство = новый стиль
В следующем примере изменяется стиль элемента <p>:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</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>
