выбор цвета на вкус посетителя

Объект элемента select. Изменяем цвет фона страницы

Всемирная паутина не стоит на месте, а развивается семимильными шагами, и если раньше одна только возможность открыть сайт вызывала неподдельный восторг у пользователя, то с тех пор требования значительно изменились. Пользователь стал куда более требовательным к мелочам... Так почему бы ему не дать возможность самостоятельно выбирать цвет фона страницы?

В одной из предыдущих статей мы уже рассматривали Объект элемента select в Javascript, когда создавали Выпадающее меню. Взяв за основу код из той статьи и немного его модифицировав, можно с легкостью добиться такой функции, чтобы пользователь мог по своему желанию менять цвет фона страницы. Сделать это можно при помощи document.bgColor

Как позволить пользователю менять цвет фона страницы. Выпадающее меню.

Как уже было сказано чуть выше, обратимся к коду, рассмотренному нами ранее и немного его переделаем до такого состояния:

<script type="text/javascript">
function changecol(){
var color = document.forms[0].bgcol;
document.bgColor = color.options[color.selectedIndex].value;
}
</script>

Рассмотрим тело скрипта немного подробнее

КодОписание
function changecol(){Создадим функцию, которая будет заниматься сменой цвета
var color = document.forms[0].bgcol;Объявляем переменную, которая ссылается на объект select
document.bgColor = color.options[color.selectedIndex].value;Применяем к документу фоновый цвет, значение которого получено при помощи формы

Ну и, соответственно, сама форма, в которой укажем возможные вариации цветов. Делаем все по аналогии с выпадающим меню, поэтому расписывать подробно не имеет смысла:

<form>
Выберите цвет фона
<select name="bgcol" onchange="changecol()">
<option selected value=""> Текущий
<option value="Red">Красный
<option value="Yellow">Желтый
<option value="#008000">Зеленый

</select>

</form>

Внимательные уже наверное заметили, что работает не только непосредственное указание цветов, но и их HEX кодировка (#008000 для зеленого).

Таким образом, полный код страницы будет иметь приблизительно такой вид:

<html>
<head>
<title>Изменяемый фон страницы</title>
<script type="text/javascript">
function changecol(){
var color = document.forms[0].bgcol;
document.bgColor = color.options[color.selectedIndex].value;
}
</script></head>
<body>
<form>
Выберите цвет фона
<select name="bgcol" onchange="changecol()">
<option selected value=""> Текущий
<option value="Red">Красный
<option value="Yellow">Желтый
<option value="#008000">Зеленый
</select></form></body></html>

Файл выбора цвета фона выпадающим меню

Однако, данный способ смены фона не представляет особого интереса, потому как не дает пользователю полной свободы действия настройки фона "под себя". Что если позволить ему вписать любой цвет самостоятельно? (название или HEX кодировку. Не будем сейчас принимать во внимание тот факт, что большинство любителей интернета не то что не смогут этого сделать, но и слышали о ней ровным счетом никогда. Мы сейчас лишь изучаем формы и их применение.

Как позволить пользователю самому выбирать цвет фона страницы?

Реализовать данную опцию - проще простого. Для этого создадим малюсенькую функцию:

function changecol(){document.bgColor = document.getElementById("bgcol").value;}

Как можно видеть, функция changecol присваивает цвет фона страницы, забирая значение элемента bgcol.

Ну и, естественно, создаем поле для ввода и кнопку, при нажатии на которую будет вызываться вышеописанная функция:

<form>
Выберите цвет фона
<input type="text" name="bgcol" id="bgcol">
<input type="button" name="but" id="but" value="Сменить цвет!" onclick ="changecol()">

</form>

Файл выбора цвета фона формой ввода