网页换肤效果就是利用js与css来实现的，当用户点击换时我们利用js不刷新页面给当前页面更新css即可，如果想它刷新之后还是我们设置的皮肤,只要记录在用户cookie中即可。
网页换肤实现原理：
使用jquery.cookie插件将用户操作记录下来，下次访问时直接读取cookie记录(本例中，只用于设置样式)
实例：设置cookie值用于记录.demo标签的id值以模拟“网页换肤”功能的实现，换肤原理思路是一样的！
查看效果方法：点击运行按钮，在新打开的演示页面中随意点击“假装是绿色主题”、“假装是黑色主题”2个链接中的任意一个，.demo标签背景色随之切换，刷新页面或退出浏览器再重新打开，.demo标签背景色仍然保持上次的操作状态不变！
源代码展示：
| 代码如下 | 复制代码 |
<style type="text/css">
.clickBox{width:300px;height:45px;margin:0 auto; text-align:center;padding:10px;}
.demo{width:300px; height:300px; border:1px red solid;margin:0 auto;}
.demo#green{ background:green;}
.demo#black{ background:black;}
</style>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
$(".clickBox >a").click(function(){
$(".demo").attr("id",this.id);
$.cookie("theme",this.id,{expires:1});//设置cookie变量theme，cookie有效时长是1天
})
var favCss=$.cookie("theme");
if(favCss){//假如cookie值存在，直接设置id值以显示背景色
$(".demo").attr("id",favCss);
}
})
</script>
</p>
<div class="clickBox">
<a href="javascript：;" id="green">假装是绿色主题</a> <a href="javascript：;" id="black">假装是黑色主题</a>
</div>
<div class="demo">
</div> |
