JavaScript HTML DOM - Зміна CSS
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>
</body>
</html>
Спробуйте самі »
Використання подій
HTML DOM дозволяє виконувати код, коли відбувається подія.
Події генеруються браузером, коли "щось відбувається" з елементами HTML:
- Натиснуто елемент
- Сторінку завантажено
- Змінено поля введення
Ви дізнаєтеся більше про події в наступному розділі цього посібника.
Цей приклад змінює стиль елемента HTML на id="id1", коли користувач натискає кнопку:
Приклад
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Натисни мене!</button>
</body>
</html>
Спробуйте самі »
Більше прикладів
Видимість Як зробити елемент невидимим. Ви хочете показати елемент чи ні?
Довідник про об’єкт стилю HTML DOM
Для всіх властивостей стилю HTML DOM перегляньте повний Довідник об’єктів стилю HTML DOM на нашому сайті W3Schools українською.
