Изменить фон документа - 5 простых способов. JavaScript.

★ Как работают нижеприведенные программы
★JavaScript
Способы 1, 2, 3, 4
★CSS
Способ 5
★ Палитра цветов фона
★ Изменить фон фигуры
Как работают нижеприведенные программы
Все способы при срабатывании дают один и тот же результат: после загрузки получаем
первый цвет фона заданный в программе документа тэгом <body bgcolor>. Первый щелчок 
по фону меняет его цвет, второй щелчок возвращает цвет фона к исходному. Посмотрите 
скрипты различных способов и выберите тот, который вас лучше устраивает. На мой  
взгляд, оптимальными являются первый и четвертый способы.  Покликайте, чтобы 
изменить фон и вернуться к исходному.
Если требуется много цветов фона, посмотрите параграф "Палитра цветов".

 
JavaScript

Способ 1
      Основной код - код изменения цвета фона 
document.bgColor='код цвета'
Функция SI() работает так. После загрузки получаем исходный цвет фона,
который задается кодом <body bgcolor='исходный цвет фона'>. Щелчок по
фону меняет его цвет на требуемый.  
</head>
<script>
    var clic = 0
  function SI() {
    if (clic == 0) {document.bgColor='код цвета фона (после  щелчка)'
      clic = 1 }
    else {
    document.bgColor='код цвета фона (исходный - до щелчка)'
      clic = 0 }
  }
</script>
<body>
<body bgcolor='исходный цвет фона'>
<p  align=center style="  font-size:40; color:red">
Текст документа
<BR><input type="button"  value=кликни name=but OnClick='SI()'>

Способ 2
       Этот способ аналогичен способу 1. Отличие состоит в использовании функции 
от аргумента (Element) и обращение к цвету через код style.backgroundColor. Кроме 
того, способ не нуждается в обработчике  - достаточно кликнуть по тексту. Имеется 
одно неудобство, которое указано в Постскриптуме.

</head>
<script>
var clic = 0;
  function SIW(Element) {
    if (clic == 0) {
      Element.style.backgroundColor = 'код цвета после клика'
      clic = 1;
    }
    else {
      Element.style.backgroundColor = 'исходный цвет фона'
      clic = 0;
    }
  }
</script>
<body bgColor='исходный цвет фона'> 
<p  align=center style="  font-size:30; color:blue; " onclick="SIW(this);">
Текст документа<BR>
Текст документа<BR>
Текст документа<BR>
<BR><input type="button"  value=кликни name=but2 OnClick='SIW()'>
P.S. Этот способ, по сути, меняет фон строки. Если страница не заполнена текстом 
или изображениями, то нижняя часть экрана сохраняет исходный цвет документа.

Способ 3 
       В этом способе не используется переменная var=clic, но добавляется одна 
строчка в условном операторе.  
Кодировка такая.
</head>
<script>
function CWW(){
if (document.bgColor=='исходный цвет фона')
{document.bgColor='код цвета после клика'}
else
{document.bgColor='исходный цвет фона'}
}
</script>
<body bgColor='исходный цвет фона'> 
Текст документа
<input type="button"  value=кликни name=but2 OnClick='CWW()'>

Способ 4           
       Можно изменить фон  документа с помощью двухкомпонентного массива. 
В нижеприведенном скрипте цвет фона меняется с бледно-зеленого (cfc) на 
розовый (pink).
</head>
<body>
<script>
massive_length=2;        /*сколько будет цветов*/
col= new Array(massive_length);
col= ["cfc","pink"]
var n = 1;
function WWR(){
re = col[n];
document.body.style.backgroundColor =re;
n++;
if(n>massive_length-1) n=0;
}
</script>
<body bgcolor="cfc">
Текст документа
<input type="button"  value=кликни name=but2 OnClick='WWR()'>

C S S
Способ 5
      Этот способ не использует скрипт и основан практически на чистом CSS,
т.е. на использовании стиля, который указывается перед тэгом <body>. В стиле
задаются два класса. В первом (имя класса: body) указывается цвет фона после 
загрузки, во втором (имя класса: click) цвет фона после щелчка (клика) по фону. 
Запуск программы происходит без кнопки обработчика по коду, содержащему условный 
оператор. Такой код, содержащий знаки: '?' и ':', получил наименование 
тернарного оператора - подробнее смотри здесь. Кодировка этого способа изменения 
фона документа 
выглядит так.
 
<html>
<head>
</head>
<style>
.body {	background-color:blue}   /*код первого цвета*/
.click {background-color:green}  /*код второго цвета*/
</style>
<body>
<div class="body" onclick="this.className = (this.className == 'body click'
? 'body' : 'body click')">   /*строку не разрывать*/
<Текст документа></div>
</body>
</HTML>

На что надо обратить внимание в этом способе.
Первое.
    html-ный текст  и текст в скрипте должны находиться после обработчика 
в блоке div.
Второе.
    Допустим, что мы создали файл, содержащий вышеуказанные коды, и заменили слова 
"Текст документа" строками нашего текста. Если наш текст короткий (последняя строка
располагается выше нижнего края окна браузера), мы обнаружим, что цветной фон 
исчезает на последнеей строке текста - дальше будет белый фон. Это объясняется тем, 
что код обработчика требует открывающего тэга <div (закрывающий тэг </div> 
можно вообще не ставить - он дописывается автоматически). По сути, в рассмотренном  
способе фон относится не к телу документа, а к блоку div, закрывающий тэг которого 
в рассматриваемом скрипте стоит перед </body>. Отметим, что замена <div на <р и <а 
не работает.    В принципе, в этом гипотетическом случае сдвинуть нижнюю границу
цветного фона можно было бы, добавив перед  тэгом </div> код переноса строки <BR>. 
Однако на практике, случай короткого текста представляется маловероятным.

Нужно учитывать, что  использование этого способа может приводить к неудобству: при 
клике в окне браузера будут запускаться другие скрипты, содержащие функцию 
document.addEventListener("click", function). Тогда для запуска других скриптов 
следует в качестве обработчика использовать кнопку.

Изменить фон фигуры           

       Сначала создадим фигуру (прямоугольник) с идентификатором id="mypict".
Затем запишем массив цветов (их у нас будет 5). Далее создаем функцию CWW, которая 
по клику переходит от цвета к цвету. Росле 5-го цвета начинается второй круг.

</head>
<body>
<script>
massive_length=5;        /*сколько будет цветов*/
colo= ["green","white","#FF0000","#ffff00","#40e0d0"]
var n = 1;
function DWW(){
re = colo[n];
document.body.style.backgroundColor =re;
n++;
if(n>massive_length-1) n=0;
}
</script>
      /*строку между div-ами не разрывать*/
<div id="mypict" style='position: absolute; margin-left:110;margin-top:-45px;
font-size:130; color:red; align:center;border-width:6px; border-style: solid; 
border-color:violet; background-color:green; WIDTH:200; height:100;'></div>
<input type="button"  value=кликни name=but2 OnClick='DWW()'>







Палитра цветов фона
       Для выбора оптимального фона можно создать палитру цветов. 
Для каждого цвета создаем кнопку и записываем код (например, для красного цвета):  
document.write("<input type=button value='' style='width:35;
height:35; background:red' onClick=bgColor='#ff0000'>"),
Обратите внимание на то, что цвет в строке задается два раза: один раз  в стиле,
другой раз в копке обработчика, причем в стиле текстовый код цвета (red, cyan) задается 
без кавычек. В результате имеем панель кнопок, управляющих различными цветами фона. 
Посмотрите, как это происходит. 

Кодировка
</HEAD>
<script>
ww="Чтобы создать новый фон, щелкните по соответствующему цвету<BR><BR>"
document.write(ww.fontsize (5).fontcolor("#000000"))
document.write("<FORM><input type=button value='' style='width:35; height:35;  background:red' onClick=bgColor='#ff0000'>")
document.write("<FORM><input type=button value='' style='width:35; height:35;  background:green' onClick=bgColor='#00ff00'>")
document.write("<FORM><input type=button value='' style='width:35; height:35;  background:cyan' onClick=bgColor='cyan'>")
document.write("<FORM><input type=button value='' style='width:35; height:35;  background:#ffffff' onClick=bgColor='#ffffff'>")
document.write("<FORM><input type=button value='' style='width:35; height:35;  background:#c71585' onClick=bgColor='#c71585'>")
document.write("<FORM><input type=button value='' style='width:35; height:35;  background:#90ee90' onClick=bgColor='#90ee90'>")
document.write("<FORM><input type=button value='' style='width:35; height:35;  background: yellow'  onClick=bgColor='yellow'>")
document.write("<FORM><input type=button value='' style='width:35; height:35;  background:#f19ff6' onClick=bgColor='#f19ff6'>")
document.write("<FORM><input type=button value='' style='width:35; height:35;  background:#00ff99' onClick=bgColor='#00ff99'>")
document.write("<FORM><BR><BR><INPUT TYPE=button VALUE='Закрыть новое окно' ONCLICK=window.close()></FORM>")>
</script>
<body>
<p  align=center><img src="531.jpg" style='width:300; height:200; align:center '>
<BR><BR><font size=3 color=red>JavaScript - язык программирования, основанный на объектном 
представлении браузера.Объекты браузера имеют иерархическую 
структуру. На самом верхнем уровне располагается объект window 
окно браузера)- родитель всех остальных объектов.
<body bgcolor=ccffcc>
</body>
</html>
Оглавление (простые скрипты для основных приложений JavaScript)