web 切换皮肤

情景:web网站设计了两套皮肤:黑色和蓝色,主界面有一个按钮,点击按钮,可以在这两个皮肤间切换。

实现:jquery操作css样式,并且将当前的主题样式写入cookie中(如需永久有效,请写入数据库中)。

需要的js:jquery.cookie.js 以及 jquery.js。

在[b]全局页[/b]面中,有引入css样式的连接:


在js脚本中,给该css样式添加href属性:


点击切换皮肤按钮时,调用的js函数:
function changeCssThemeStyle() {
var cookie = $.cookie("themestyle");
if (cookie == "blue") {
$.cookie("themestyle", "black",{expires: 365, path: '/'}); //修改或添加名为"themestyle"的cookie,值设为"black",有效期为365天,路径为网站的根目录。
} else {
$.cookie("themestyle", "blue",{expires: 365, path: '/'});
}
window.location = window.location;
}

注意:在默认情况下,只有设置cookie的网页才能读取该cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取cookie的顶级目录。将这个路径设置为网站的根目录(“/”),可以让所有网页都能互相读取cookie.

你可能感兴趣的:(web,皮肤切换)