网站换肤，是一个比较老的话题了，理论很清晰，就是要根据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