УРОКИ JAVASCRIPT HTML DOM DHTML AJAX ПРИМЕРЫ JAVASCRIPT

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>

Попробуйте сами »





« Назад Далее »
© 2011-2019 Уроки JavaScript