Возможно Вы обращали внимание, что на некоторых сайтах, предлагается возможность на javascript изменить цвет фона, который будет подходить под Ваше, скажем так, душевное настроение.
Пример: Возьмем Яндекс почту, где можно сменить тему, установив себе нужную. Процесс смены очень прост, Вы выбираете себе понравившуюся тему и устанавливаете ее. Теперь при каждом запуске, она радует Вас! Так вот, хочу рассмотреть метод смены цвета фона на JavaScript и CSS.
По сути, в применении, Вы можете использовать скрипт везде, не обязательно, что это будет только фон или тема, к примеру можно данную технологию внедрить и в подсказки. Допустим, Вы создали на сайте краткий орфографический словарь, который имеет за каждым словом свою пунктуацию и орфографию, а также определение самого слова.
<select onchange="CSSThemeChanger(this.value)"> <option value='background_color/white.css'>Белый</option> <option value='background_color/blue.css'>Синий</option> <option value='background_color/orange.css'>Оранжевый</option> <option value='background_color/red.css'>Красный</option> </select>
Создаем папку background_color (создайте любую папку по своему желанию, только не забывайте в файле index.php в тегах option указывать правильный url путь к CSS файлу) и в нее помещаем четыре CSS файла, которые и будут менять сам фон.
Пользователь выбирая слово, получает о нем информацию - очень удобно и практично! Ну это всего лишь пример, где и как уже применить данный скрипт, решать уже Вам! Не отступая от темы, давайте разберемся с самим кодом и со структурой скрипта.
Создаем файл index.php. В нем подключаем два CSS стиля.
<link rel="stylesheet" type="text/css" href="style.css"/> <link id="myCSSThemeDefault" rel="stylesheet" href="background_color/white.css" media="all" />
Теперь сам код на JavaScript, который работает с CSS стилями. Все стили записываются в Cookie. Время хранения данных в Cookie 24 часа (по своему желанию, измените это время, на которое Вам необходимо). Затем создается метод, который считывает определенное время параметра из Cookie. Как параметр по времени проходит, Cookie автоматически обновляются в первичное состояние. При записи нового параметра в Cookie формируется url путь к CSS стилю. Если CSS файл существует, он записывается в Cookie, если же CSS файл не найден, то функция возвращает первичное значение. При записи выполняется установка фона. Как пользователь обновляет фон, информация сбрасывается с Cookie и перезаписывается на новый CSS файл.
<script type="text/javascript">
Cookie = {
// метод для установки параметра в куки
'set': function( name, value, timeout, path )
{
// цвет фона 24 часа хранится в Cookie
var timeout = timeout || 1000*3600*24;
var date = (new Date((new Date()).getTime() + timeout))
.toUTCString();
document.cookie = name + '=' + encodeURIComponent( value )
+ ';expires=' + date + ';path=' + (path || '/');
},
// метод для считывания определенного параметра из куков
'get': function( name )
{
name = name || null;
var cookieVars = document.cookie.split(/; /)
for( var i in cookieVars)
{
var cookie = cookieVars[i].split('=')
if( name == cookie[0] ) return decodeURIComponent(cookie[1]);
}
}
}
function CSSThemeChanger( url )
{
var url = url || '';
var head = document.getElementsByTagName('head')[0];
var myCSSTheme = document.getElementById('myCSSTheme') || null;
// создаем и добавляем элемент стилей на страницу
if( !myCSSTheme )
{
myCSSTheme = document.createElement('link');
myCSSTheme.id = 'myCSSTheme';
myCSSTheme.rel = 'stylesheet';
myCSSTheme.media = 'all';
head.appendChild( myCSSTheme );
}
// устанавливаем текущую тему (указанный адрес CSS-файла)
myCSSTheme.href = url;
// записываем значение выбранного фона в Cookie
Cookie.set('theme', url);
}
// обновляем тему страницы, если пользователь заменил фон
CSSThemeChanger( Cookie.get('theme') );
</script>
Выборку я представил с помощью атрибута списка select, Вы же можете реализовать ее по своему желанию. Единственное, что стоит понимать, выборка осуществляется по обработчику событий onchange, в котором указывается связь между методом CSSThemeChanger(this.value) и в option указывается путь к CSS файлу.
В каждом CSS файле прописываем цвет фона, соответственно, каждый под свое имя.
.center
{
background: любой цвет или картинка;
}
Большое спасибо за внимание! Всем удачи в реализации!