Question

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

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

此外，我不想使用任何第三方css lib。或工具。

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

Answer 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

Answer 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')">

Answer 3

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

<body class="default">

并点击图标，只需改变身体的类，如：

<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;
}

祝你好运！

如何在网站中使用动态css

3 个答案: