содержание HTML DOM Изменить HTML
С помощью HTML DOM, JavaScript может получить доступ к HTML-документ для каждого элемента.
Изменение содержимого HTML
Самый простой способ изменить содержимое элемента использовать свойство innerHTML.
В следующем примере изменяется элемент <p> в HTML содержание:
примеров
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Попробуйте »
Стили Изменить HTML
Через HTML DOM, вы можете получить доступ к объекту объект HTML стиль.
Следующий пример изменяет стили HTML абзаца:
примеров
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Попробуйте »
Использование событий
HTML DOM позволяет выполнять код, когда происходит событие.
Когда элемент HTML "что-то происходит", браузер будет генерировать событие:
- Нажмите на элемент
- Загрузка страницы
- Измените значение в поле ввода
Вы можете узнать больше об этом событии в следующей главе.
Следующие два примера, чтобы изменить цвет фона <тело> элемент в щелчке по кнопке:
примеров
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
Попробуйте »
В этом случае функция выполняет один и тот же код:
примеров
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
Попробуйте »
Следующий пример изменяет элемент текста <р> в щелчке по кнопке:
примеров
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
Попробуйте »