网站转变风格的css变化

网站换肤，是一个比较老的话题了，理论很清晰，就是要根据js 来变换文件加载的css文件，根据需求来加载不同的css文件，有了这个基础就很明确要怎么做了，但是实际上还要记录当前用户的cookie  保证用户在下次登录的时候，能够使用之前的皮肤，这也就用到了cookie 和本地存储了 这就要看需要怎么样的需求了，下面这段代码 ，可以说直接扒下来就可以用，因为项目中用到了iframe，所以也就顾及到了iframe的css样式的引入 。

##title=css4
<link rel="stylesheet" title=css4 type="text/css" href="$request.contextPath/plugins/jquery-ui-custom/css/custom-theme/jquery-ui-1.9.2.custom-flat4.css"  charset="utf-8"/>
<link rel="stylesheet" title=css4 type="text/css" href="$request.contextPath/css/main-flat4.css"/> 
<link rel="stylesheet" title=css4 type="text/css" href="$request.contextPath/css/dashboard-flat4.css"  /> 
##title=css1 默认
<link rel="stylesheet" title=css1 type="text/css" href="$request.contextPath/plugins/jquery-ui-custom/css/custom-theme/jquery-ui-1.9.2.custom-flat3.css" charset="utf-8"/>
<link rel="stylesheet" title=css1 type="text/css" href="$request.contextPath/css/main-flat3.css" /> 
<link rel="stylesheet" title=css1 type="text/css" href="$request.contextPath/css/dashboard-flat3.css"/> 

#if($cssFiles)
    #foreach($css in $cssFiles)
        <link rel="stylesheet" type="text/css" href="$request.contextPath/$css"/>
    #end
#end
<script type="text/javascript" src="$request.contextPath/plugins/jquery-ui-custom/js/jquery-1.8.3.js"></script> 
<script type="text/javascript">

$(document).ready(function(){ 
//  $('.skin').click(function(event){
//        event.stopPropagation(); 
//      $('.skin-content').slideToggle("slow");
//  });
//    $(document).click(function(){
//      $('.skin-content').slideUp("slow");
//  });
    $('.styleswitch').click(function(){
        switchStylestyle(this.getAttribute("rel"));
        //alert(this.getAttribute("rel"));
        return false;     
    });
    var c = readCookie('style');
    if (c) switchStylestyle(c);
}); 

function switchStylestyle(styleName)  
{
    $('link[rel*=style][title]').each(function(i) 
    {
        this.disabled = true;
        if (this.getAttribute('title') == styleName) this.disabled = false;
    });
    var f=$('iframe');
    f.contents().find('link[rel*=style][title]').each(function(i) 
    {
        this.disabled = true;
        if (this.getAttribute('title') == styleName) this.disabled = false;
    });
    var f=$('iframe').contents().find('iframe');
    f.contents().find('link[rel*=style][title]').each(function(i) 
    {
        this.disabled = true;
        if (this.getAttribute('title') == styleName) this.disabled = false;
    });
    createCookie('style', styleName, 365);
}

function createCookie(name,value,days)
{
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name)
{
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++)
    {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name)
{
    createCookie(name,"",-1);
}
// /cookie functions

    </script>
    <!--<script type="text/javascript">-->
//var currentStyle = localStorage.getItem('curSDAPStyle') || 'css1';
//$(function(){
//  $('.skin').click(function(event){
//        event.stopPropagation(); 
//      $('.skin-content').slideToggle("slow");
//  });
//    $(document).click(function(){
//      $('.skin-content').slideUp("slow");
//  });
//    $('.styleswitch').click(function(){
//        switchStyle(this.getAttribute("rel"));
//        //alert(this.getAttribute("rel"));
//        return false;     
//    });
//    
//    
//    if (currentStyle) {
//      switchStyle(currentStyle);
//      if ($('iframe').length) {
//          $('iframe').each(function () {
//              $(this).load(function () {
//                  var currentStyle = localStorage.getItem('curSDAPStyle') || 'css1';
//                  switchStyle(currentStyle);
//                    if ($(this).contents().find('iframe').length) {
//                        $(this).contents().find('iframe').each(function () {
//                            $(this).load(function () {
//                              var currentStyle = localStorage.getItem('curSDAPStyle') || 'css1';
//                              switchStyle(currentStyle);
//                            });
//                        });
//                    }
//              });
//            });
//      }
//    }
//}); 
//function switchStyle(name) {
//  var _loop = function (el) {
//        if (el.find('link[rel*=style][title]').length) {
//          el.find('link[rel*=style][title]').each(function () {
//              this.disabled = true;
//              if (this.getAttribute('title') == name) this.disabled = false;
//          });
//        } else {
//            _render(el);
//        }
//  }, _render = function (el, type) {
//          var curEl = type ? el : el.contents();
//          if (curEl.find('link[rel*=style][title]').length) {
//              _loop(curEl);
//          } else {
//              el.load(function () {
//                  _loop(curEl);
//              });
//          }
//      };
//  localStorage.setItem('curSDAPStyle', name);
//    currentStyle = name;
//  _render($(document), 'root');
//  if ($('iframe').length) {
//      $('iframe').each(function () {
//          _render($(this));
//          if ($(this).contents().find('iframe').length) {
//              $(this).contents().find('iframe').each(function () {
//                  _render($(this));
//              });
//          }
//      });
//  }
//}
 <!--</script>-->

两套样式，主要依据了link标签的title 和disabled 这两个属性来进行控制的，cookie相关的代码几乎可以不用动了，要注意的就是点击事件来分别控制不同的代码引入就好了。。

 

还可以进入个人博客：www.jishubar.cn