js网站换肤

wyl232

只是实现了一个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;elsejQuery("#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;}//删除cookiefunction 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> 如果谁有更好，更简单的实现方法还请指教！！