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>
Попробуй сам " Использование Events
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'">
Click Me!</button>
</body>
</html> Попробуй сам " Еще примеры
Видимость Как сделать элемент невидимым. Вы хотите, чтобы показать элемент или нет?
Ссылка на объект HTML DOM Style
Для всех свойств стиля HTML DOM, посмотрите на нашу полную ссылка на объект HTML DOM Style .
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »