HTML DOM - Изменение HTML Элементов
HTML элементы можно изменять, используя JavaScript, HTML DOM и события.
Изменить HTML Элемент
HTML DOM и JavaScript могут изменять внутреннее содержимое и атрибуты HTML элементов.
Следующий пример изменяет цвет фона элемента <body>:
Пример
<html>
<body>
<script type="text/javascript">
document.body.bgColor="lavender";
</script>
</body>
</html> |
Попробуйте сами »
|
Изменить Текст HTML Элемента - innerHTML
Простейший способ получить и модифицировать содержимое элемента - использование свойства innerHTML.
Следующий пример изменяет текст элемента <p>:
Пример
<html>
<body>
<p id="p1">Привет Мир!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="Новый текст!";
</script>
</body>
</html> |
Попробуйте сами »
|
Изменить HTML Элемент Используя События
Обработчик события позволяет вам выполнить код, когда происходит событие.
События генерируются браузером, когда пользователь кликает на элементе, загружается страница, данные с формы отправляются на обработку и т.д.
Вы можете прочитать больше о событиях в следующем уроке.
Следующий пример изменяет цвет фона элемента <body> при нажатии кнопки:
Пример
<html>
<body>
<input type="button" onclick="document.body.bgColor='lavender';"
value="Изменить цвет фона" />
</body>
</html> |
Попробуйте сами »
|
Изменить Текст Элемента - с помощью Функции
Следующий пример использует функцию для изменения текста элемента <p> при нажатии кнопки:
Пример
<html>
<head>
<script type="text/javascript">
function ChangeText()
{
document.getElementById("p1").innerHTML="Новый текст!";
}
</script>
</head>
<body>
<p id="p1">Привет мир!</p>
<input type="button" onclick="ChangeText()" value="Изменить текст" />
</body>
</html> |
Попробуйте сами »
|
Использование Объекта Стиля (style)
Объект style (стиль) каждого HTML элемента представляет его индивидуальный стиль.
Следующий пример использует функцию для изменения стиля элемента <body> при нажатии кнопки:
Пример
<html>
<head>
<script type="text/javascript">
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
</head>
<body>
<input type="button" onclick="ChangeBackground()"
value="Изменить цвет фона" />
</body>
</html> |
Попробуйте сами »
|
Изменить шрифт и цвет Элемента
Следующий пример использует функцию для изменения стиля элемента <p> при нажатии кнопки:
Пример
<html>
<head>
<script type="text/javascript">
function ChangeStyle()
{
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontFamily="Arial";
}
</script>
</head>
<body>
<p id="p1">Привет мир!</p>
<input type="button" onclick="ChangeStyle()" value="Изменить стиль" />
</body>
</html> |
Попробуйте сами »
|
|