js网站换肤

只是实现了一个demo，只用了一个css，领会精神即可，能看出效果来采用如下方法，css和image用两套，

themeManage.js如下

var defaultTheme=1;

function changeTheme(selectedID) {
	alert("change"+selectedID);
	themeID=selectedID;
  	var objLinkThemeGlobal=document.getElementById('linkThemeGlobal');
  	var objLinkThemeIndex=document.getElementById('linkThemeIndex');
  	var objLinkThemeDetails=document.getElementById('linkThemeDetails');
  	var objLinkThemeList=document.getElementById('linkThemeList');
  	var objLinkThemeMenu=document.getElementById('linkThemeMenu');
  	
  	if(objLinkThemeMenu!=null){
  		objLinkThemeMenu.href='./styles/theme' + themeID + '/front/jqueryslidemenu.css';
  	}
  	if(objLinkThemeGlobal!=null){
  		objLinkThemeGlobal.href='./styles/theme' + themeID + '/front/blue.css';
  	}
  	if(objLinkThemeIndex!=null){
  		objLinkThemeIndex.href='./styles/theme' + themeID + '/front/index.css';
  	}
  	if(objLinkThemeDetails!=null){
  		objLinkThemeDetails.href='./styles/theme' + themeID + '/front/details.css';
  	}
  	if(objLinkThemeList!=null){
  		objLinkThemeList.href='./styles/theme' + themeID + '/front/list.css';
  	}
  	
  	oldTheme=getThemeID();
  	document.getElementById('img_theme_'+oldTheme).src='../images/common/theme_'+oldTheme+'_0.gif';
  	document.getElementById('img_theme_'+themeID).src='../images/common/theme_'+themeID+'_1.gif';
  	delCookie('myHntTheme');
  	SetCookie('myHntTheme',themeID);
	//writeHeaderFlash();
	//writeBannerFlash();
}

function getThemeID(){
	var tid=getCookie('myHntTheme');
	if(tid==null || tid==''){
		tid=defaultTheme;
	}
	return tid;
}

function writeStylesheetLinks(_links){
	themeID = getThemeID();
	alert(_links.length);
	for (var i = 0; i < _links.length; i++) {
		var link = _links[i];
		switch (link)
		{
			case 'linkThemeGlobal':
				document.writeln("<link id='linkThemeGlobal' href='./styles/theme" + themeID + "/front/blue.css' type='text/css' rel='stylesheet' />");
				break;
			case 'linkThemeIndex':
				document.writeln("<link id='linkThemeIndex' href='./styles/theme" + themeID + "/front/index.css' type='text/css' rel='stylesheet' />");
				break;
			case 'linkThemeDetails':
				document.writeln("<link id='linkThemeDetails' href='./styles/theme" + themeID + "/front/details.css' type='text/css' rel='stylesheet' />");
				break;
			case 'linkThemeList':
				document.writeln("<link id='linkThemeList' href='./styles/theme" + themeID + "/front/list.css' type='text/css' rel='stylesheet' />");
				break;
			case 'linkThemeMenu':
				document.writeln("<link id='linkThemeMenu' href='./styles/theme" + themeID + "/front/jqueryslidemenu.css' type='text/css' rel='stylesheet' />");
				break;
		};
	}
}
function writeHeaderFlash(onload){
	themeID = getThemeID();
	var flash = '\
    <object id="HeaderFlashObject" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1002px" height="145px">\
    <param name="allowScriptAccess" value="sameDomain"><param name="movie" value="../images/theme' + themeID + '/front/headbanner.swf"><param name="quality" value="high">\
    <param name="menu" value="false"><param name=wmode value="opaque">\
    <embed src="../images/theme' + themeID + '/front/headbanner.swf" wmode="opaque" menu="false" quality="high" width ="1002px" height="145px" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />\
    </object>';
	if (onload) {
		document.write(flash);
	} else {
		jQuery("#headbanner").empty()
		if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 7){
			return;
		}else{
			jQuery("#headbanner").html(flash);
		}	
	}
}

function writeBannerFlash(onload){
	themeID = getThemeID();
	var flash = '\
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="615px" height="90px">\
    <param name="allowScriptAccess" value="sameDomain"><param name="movie" value="../images/theme' + themeID + '/front/banner01.swf"><param name="quality" value="high">\
    <param name="menu" value="false"><param name=wmode value="opaque">\
    <embed src="../images/theme' + themeID + '/front/banner01.swf" wmode="opaque" menu="false" quality="high" width ="615px" height="90px" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />\
    </object>';
	if (onload) {
		document.write(flash);
	} else {
		if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 7)
			return;
		else
			jQuery("#dianxin-banner").empty().html(flash);
	}
}

//将主题的图片改为“选中”
window.onload = function(){
	var themeID=getThemeID();
	document.getElementById('img_theme_'+themeID).src='./images/common/theme_'+themeID+'_1.gif';
}

 cookieManage.js代码实现了cookie的管理，代码如下：

// JavaScript Document

//此 cookie 将被保存 30 天
var Days = 30; 

//写cookies函数
//两个参数，一个是cookie的名子，一个是值
function SetCookie(name,value){
    var exp  = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//取cookies函数 
function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;

}

//删除cookie
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

 index.html 如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="./scripts/common/cookieManage.js"></script>
<script type="text/javascript" src="./scripts/common/themeManage.js"></script>
<script type="text/javascript" >writeStylesheetLinks(["linkThemeGlobal"]);</script>
</head>

<body>
<div class="topnav">
  <div class="topnav_but"></div>
  <ul>
    <li>2009年1月6日  星期四
    </li>
  </ul>
  <div class="topnav_font">
    <div class="topnav_font_left"></div>
	<div class="topnav_font_right"></div>
  </div>
  <div class="control_area">
    <div class="control_area_left"></div>
    <div class="control_area_content01"><a href="#" target="_blank">恢复默认</a></div>
    <div class="control_area_content02"><a href="#" target="_blank">添加内容</a></div>
    <div class="control_area_content03"><a href="javascript:changeTheme(1);"><img src="images/theme_1_0.gif" id="img_theme_1" alt="清新蓝" border="0"/></a></div>
    <div class="control_area_content03"><a href="javascript:changeTheme(2);"><img src="images/theme_2_0.gif" id="img_theme_2" alt="清新绿" border="0"/></a></div>
    <div class="control_area_content03"><a href="javascript:changeTheme(3);"><img src="images/topnav_themes_blue.gif" id="img_theme_3" alt="清新紫" border="0"/></a></div>
    <div class="control_area_right"></div>
  </div>
</div>

 如果谁有更好，更简单的实现方法还请指教！！