DOM - Изменение CSS

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>