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

是否有可能在一个页面上有3-4个CSS，然后在任何事件中，比如点击，更改整个网页的CSS。这样我们可以给我们的用户改变主题的能力。我知道我们可以通过改变元素的CSS：如何在点击时更改整个页面/网站的CSS？

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

来源

2010-03-14 Rakesh Juyal

是的，这是可能的。通常情况下，您要做的是编写一个JavaScript函数，该函数将更改文档的<head>或从文档的<head>中添加或删除样式表。为了让体验更好一点，您通常会将用户的偏好存储在cookie中。有一个article on A List Apart that show how to implement this。当然，you can do this with jQuery ...你可能想看看jStyler的来源。

来源

2010-03-14 16:58:10

这似乎是有前途的:) +1 – 2010-03-14 17:01:55

见jStyler plguin的jQuery ，这个源文件非常简短并且易于理解。 – 2010-03-14 17:04:09

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

来源

2010-03-14 16:55:05 Turtle

但我想这样做@client边，我的意思是使用jQuery或JavaScript – 2010-03-14 17:02:42

CSS是emdeded到DOM在“链接”的标签，这样你就可以找到这个链接，并添加/删除

下面的代码演示如何删除和添加新的（我使用MS AJAX参见方法$得到，但你可以用纯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);

来源

2010-03-14 16:58:31 Dewfy

不会删除并添加'link rel =“样式表”'会做到这一点吗？不确定，但我将不得不试试 – 2010-03-14 17:06:14

@Rakesh Juyal你是指类型/ ID /字符集的冗余？如果是这样的话，charset真的是多余的，但一些浏览器强烈推荐类型（可能是我错了，但IE需要它）。脚本逻辑需要'id'。 – Dewfy 2010-03-14 18:16:16

平时最好加载外部的样式表（追加<链接>）：http://snipplr.com/view/3873/failsafe-load-for-attaching-stylesheet/

但是，如果你需要创建一堆在飞行中的风格，你还可以建立和>节点追加<风格的DOM：http://jonraasch.com/blog/javascript-style-node

来源

2010-03-14 20:06:51

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

回答

相关问题