web 切换肌肤

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

实现：jquery操作css样式，并且将当前的主题样式写入cookie中（如需永久有效，请写入数据库中）。

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

在全局页面中，有引入css样式的连接：

<link href="" rel="stylesheet" type="text/css" id="css_theme_style"/>

在js脚本中，给该css样式添加href属性：

<script>var cookie_style = $.cookie("themestyle"); //取出取名为"themestyle"的cookie的值if(cookie_style=="blue"){  $('#css_theme_style').attr('href', 'skins/Blue/css/all.css'); //蓝色样式}else{  $('#css_theme_style').attr('href', 'skins/Black/css/all.css'); //黑色样式} </script>

点击切换皮肤按钮时，调用的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.

。

查看更多 下一篇