Меняем стиль сайта на лету с помощью jQuery

Что делаем
Меняем визуальное оформление сайта не перезагружая страницу. В качестве инструмента будем использовать jQuery. jQuery здесь необходим исключительно для удобства, можно обойтись стандартным функционалом javascript'а.



Делаем
Все, что нам необходимо сделать для реализации это подменить href мета тега, ссылающегося на css-файл. Этим и займемся. Для примера возьмем два css-файла Style1.css и Style2.css и ссылку на первый в head'ере:

<link rel="Stylesheet" id="Style" href="/Style1.css" />

А еще нам понадобиться кнопка-менялка стиля:

<a href="#" onclick="javascript:ChangeCss('Style1.css'); return false;">ChangeCss 1</a>

Не совсем кнопка, конечно, но не суть. При клике будет вызываться следующая javascript-функция:

function ChangeCss(styleName) {

    $("#Style").attr("href", "Style2.css");

}

Функция проста как 3 копейки: берем элемент по его ID и изменяем у него атрибут href.

Результат


Пример можно посмотреть у меня на сайтике www.vitalyzhukov.ru (в верхней части экрана справа кнопочки).