如何在网站中使用动态css答案

【问题标题】：How to use dyanamic css in website如何在网站中使用动态css
【发布时间】：2013-12-13 06:29:29
【问题描述】：

我想在我的网站中使用动态 CSS，比如网站顶部有 4 种不同颜色的图标，如果用户点击其中一个图标，整个配色方案和网站的图标颜色将会改变。

这以前在 yahoo.com 上可用（不确定当前是否可用）。

我也不想使用任何第三方 css 库。或工具。

任何人都可以帮助建议实现这一目标的最佳方法。

【问题讨论】：

你可以有一个脚本说当你点击其中一个图标时，向正文添加一个类，例如.theme-green，然后相应地设置样式。尝试研究 jQuery addClass，如果遇到困难，请发布一些代码。
你有工作示例的链接吗？

标签： jquery html css

【解决方案1】：

在 CSS 中定义您的样式。比如……

body.white{
   background-color:white;
   color:#333;
}
body.black{
   background-color:black;
   color: white;
}
body.blue{
   background-color:blue;
   color:white;
}

然后，添加图像按钮以更改页面上的皮肤/主题，并添加更改皮肤的单击处理程序。 here's an example

【讨论】：

【解决方案2】：

functon loadstyle(style){
    $('link#basestyle').attr('href', '/css/'+style+'.css');
}

示例 html 代码：在头部：

<link type=text/css'  rel='stylesheet' id='basestyle' href=/css/style1.css'>

在正文中：

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style1')">

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')">

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')">

【讨论】：

类似问题 => stackoverflow.com/questions/3913359/…

【解决方案3】：

好的，所以最初，在正文中添加一个默认类。喜欢：

<body class="default">

点击图标，只需更改 body 的类，如：

<i class="theme-icons" data-class="default"></i>
<i class="theme-icons" data-class="red"></i>
<i class="theme-icons" data-class="blue"></i>
<i class="theme-icons" data-class="green"></i>

$(".theme-icons").click(function(){
    $("body").removeClass("default red blue green").addClass($(this).attr("data-class"));
});

让你的 CSS 嵌套在这些主题类中。喜欢：

.default .something{
   color:#0F0;
}

.red .something{
   color:red;
}

.blue .something{
   color:blue;
}

.green .something{
   color:green;
}

祝你好运！

【讨论】：