AJAX загрузка
home

С помощью HTML DOM Вы можете изменять не только содержимое элементов, но и их оформление.

Объект style

Оформление любого элемента можно изменять из скриптов с помощью объекта style.

Пример 

//Установим желтый цвет фона для элемента elp
document.getElementById("elp").style.backgroundColor="yellow";
//Узнаем цвет фона элемента elh и выведем его на страницу
document.write("<b>"+document.getElementById("elh").style.backgroundColor+"</b>");
Попробовать в редакторе
Быстрый просмотр

Обратите внимание: узнать больше о существующих свойствах объекта style можно в нашем HTML DOM учебнике.

Изменение стилей после событий

Пример 

<html>
<head>
<script type='text/javascript'>
function start()
{
document.getElementById('elp').style.color='red';
document.getElementById('elp').style.fontWeight='bold';
}
</script>
</head>
<body>
<p id='elp' onclick='start()'>Щелкните на мне мышкой.</p>
</body>
</html>
Попробовать в редакторе
Быстрый просмотр

Сделайте сами

Задание 1 оформите элемент с id='stych' из скрипта следующим образом (стили должны применяться к элементу только после нажатия на кнопку):

  1. Цвет текста у элемента должен быть красным, а цвет фона серым.
  2. Текст должен быть написан толстым шрифтом verdana размером 20 пикселей.
  3. Вокруг элемента должна быть граница зеленого цвета толщиной 1 пиксель.

Пример 

<p id='stych'>Я абзац который необходимо оформить.</p>
<input type='button' value='Оформить абзац' onclick='styleChange()' />
Попробовать в редакторе