Как изменить CSS всей страницы / сайта по клику? - PullRequest
Новая
       27

Как изменить CSS всей страницы / сайта по клику?

8 голосов
/ 14 марта 2010

Можно ли иметь 3-4 CSS на странице, а затем в любом случае, скажем, щелкнуть, изменить CSS для всей веб-страницы. Таким образом, мы можем дать нашему пользователю возможность сменить тему. Я знаю, что мы можем изменить CSS элемента: 

$("#myElementID").removeClass("class1").addClass("class2");

Ответы [ 4 ]

9 голосов
/ 14 марта 2010

Да, это возможно. Обычно вам нужно написать функцию JavaScript, которая изменит, добавит или удалит таблицу стилей из <head> документа. Чтобы сделать его немного лучше, вы обычно сохраняете предпочтения пользователя в файле cookie. В A List Apart есть статья , в которой показано, как реализовать .

И, конечно, вы можете сделать это с помощью jQuery ... вы можете проверить источник jStyler .

2 голосов
/ 14 марта 2010

CSS Zen Garden (см. Пятый вопрос) в итоге решил, что самый простой способ - просто обновить страницу и установить новую сторону сервера CSS.

0 голосов
/ 14 марта 2010

Обычно лучше всего загрузить внешнюю таблицу стилей (добавить ): http://snipplr.com/view/3873/failsafe-load-for-attaching-stylesheet/

Но если вам нужно создать группу стилей на лету, вы также можете создать и добавить узел

0 голосов
/ 14 марта 2010

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);
...