Question

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

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

Answer 1

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

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

Answer 2

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

Answer 3

CSS通过'link'标签发布到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);

Answer 4

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

但是如果您需要动态创建一堆样式，您还可以构建并附加＆lt; style＆gt; DOM的节点：http://jonraasch.com/blog/javascript-style-node

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

4 个答案: