如何在点击时更改整个页面/网站的 CSS？答案

【问题标题】：How to change the CSS of entire page/website on click?如何在点击时更改整个页面/网站的 CSS？
【发布时间】：2010-03-14 16:48:48
【问题描述】：

是否可以在一个页面上有 3-4 个 CSS，然后在任何事件中，比如点击，更改整个网页的 css。这样我们就可以让我们的用户能够改变主题。我知道我们可以通过以下方式更改元素的 css：

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

【问题讨论】：

标签： javascript html css stylesheet

【解决方案1】：

是的，这是可能的。通常，您要做的是编写一个 JavaScript 函数，该函数将更改、添加或删除文档的 <head> 中的样式表。为了使体验更好一点，您通常会将用户的偏好存储在 cookie 中。有一个article on A List Apart that show how to implement this。

当然，you can do this with jQuery...您可能想查看jStyler 的来源。

【讨论】：

查看 jStyler 的 jQuery 插件，源代码非常简短易懂。

【解决方案2】：

The CSS Zen Garden（见第五个问题）最终决定最简单的方法就是刷新页面并设置新的 CSS 服务器端。

【讨论】：

但我想在@client端做这个，我的意思是使用jQuery或javascript

【解决方案3】：

CSS 通过“链接”标签嵌入到 DOM，因此您可以找到此链接并添加/删除

以下代码显示了如何删除和添加新的（我使用的是 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);

【讨论】：

删除和添加link rel="stylesheet" 会这样做吗？不确定，但我将不得不试一试
@Rakesh Juyal 你的意思是类型/id/字符集的冗余？如果是这样，那么 charset 确实是多余的，但是某些浏览器强烈建议使用 type （可能我对 kind 有误，但 IE 需要它）。最后，脚本逻辑需要“id”。

【解决方案4】：

通常最好加载外部样式表（附加）：http://snipplr.com/view/3873/failsafe-load-for-attaching-stylesheet/

但是如果你需要动态创建一堆样式，你也可以构建一个

【讨论】：