JavaScript HTML DOM - Изменение CSS
HTML DOM позволяет JavaScript изменять стиль элементов HTML.
Изменение стиля HTML
Чтобы изменить стиль элемента HTML, используйте следующий синтаксис:
document.getElementById(id).style.property = new style
В следующем примере изменяется стиль элемента <p>:
Пример
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
Использование событий
HTML DOM позволяет выполнять код при возникновении события.
События генерируются браузером, когда «вещи случаются» с элементами HTML:
- Элемент нажат
- Страница загружена
- Поля ввода изменены
Вы узнаете больше о событиях в следующей главе этого учебного пособия.
В этом примере изменяется стиль HTML-элемента с идентификатором = "id1", когда пользователь щелкает кнопку:
Пример
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
Другие примеры
Видимость Как сделать элемент невидимым. Показать элемент или нет?
Ссылка на объект стиля HTML DOM
Для всех свойств стиля HTML DOM, посмотрите на наш полный Ссылка на объект стиля HTML DOM.