项目中有个一键切换皮肤的功能，感觉还不错，记录下，就是各颜色样式设置起来太复杂了，不知道有没有更简便的方法：

1、切换皮肤结构层

使用"Bootstrap 折叠（Collapse）插件"：下面网站可以详细学习

Bootstrap 折叠（Collapse）插件：http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html

2、切换皮肤表示层

3、切换皮肤行为层

$("#colorPick  a").click(function(){    var oldcolor= $.cookie("color");    //获取cookie里存的color    var color=$(this).attr("data-skin");    //获取当前点击的元素的color，为属性data-skin的值    var len=$("#content-main .LRADMS_iframe").length;    //获取iframe元素的个数    for(var i=0; i

最后就是各颜色对应一套样式体系：

.skin-red .btn-default{    color:#DD4B39;}

.skin-yellow .btn-default{    color:#F39C12;}

.skin-blue .btn-primary:hover{    background-color:#007AFF;    border:1px solid #007AFF;    color:#fff;}

 补充完善：

上面是一层iframe的情况，但是实际项目中还会碰到很多层iframe嵌套的情况，就像下面这样：

$("#colorPick  a").click(function(){    var oldcolor= $.cookie("color");    var color=$(this).attr("data-skin");    var len=$("#content-main .LRADMS_iframe").length;    for(var i=0; i

标红处为iframe嵌套时寻找下级iframe的方法

此外，如果是在iframe的页面使用 $.cookie() 方法是会报错$.cookie() is not a function的错误，原因是cookie在window下才有；

因此在iframe的页面需要使用 top.$.cookie() 才会获取到cookie值

//iframe页面使用top.$.cookie() window.onload = function(){     var color = top.$.cookie("color");     $("body").addClass(color); }