Как изменить CSS всей страницы/веб-сайта по щелчку?
Действительно ли возможно иметь CSS 3-4 на странице, и затем на каком-либо событии, сказать щелчок, изменить CSS для всей веб-страницы. Таким образом, мы можем дать нашему пользователю способность изменить тему. Я знаю, что мы можем изменить CSS элемента:
$("#myElementID").removeClass("class1").addClass("class2");
4 ответа
Да, это возможно. Обычно вы пишете функцию JavaScript, которая будет изменять, добавлять или удалять таблицу стилей из документа. Чтобы сделать работу немного лучше, вы обычно сохраняете предпочтения пользователя в файле cookie. В A List Apart есть статья , в которой показано, как реализовать это .
И, конечно же, вы можете сделать это с помощью jQuery ... вы можете проверить исходный код jStyler .
CSS добавляется в DOM по тегу 'link', поэтому вы можете найти эту ссылку и добавить / удалить
В следующем коде показано, как удалить и добавить новый (я использую MS AJAX, см. метод $ get, но вы можете заменить его чистым DOM или другим диалектом):
var head = document.getElementsByTagName('head')[0];
var oldLink = $get("nameOfLink", head);
if(oldLink!=null)
head.removeChild(oldLink); //remove old entry
var s = document.createElement('link');
s.id="nameOfLink";
s.type = 'text/css';
s.rel="stylesheet";
s.charset ='utf-8';
s.href = "http://your-provided-url";
head.appendChild(s);
Обычно лучше всего загружать внешнюю таблицу стилей (добавить <ссылку>): http://snipplr.com/view/3873/failsafe- load-for-attaching-stylesheet /
Но если вам нужно создать кучу стилей на лету, вы также можете создать и добавить узел