js实现网页换肤功能 网页更换样式皮肤代码

前言

网页换肤是很早之前比较流行的技术，现在都不怎么流行了。但是，有时候有些客户就是想要这个换肤功能。于是就实践做了一下网页换肤，方法有很多，下面先对一种方法做一下简单的介绍。

网页换肤的基本原理

基本原理很简单，就是使用 JS 切换对应的 CSS 样式表。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。 那么基本工作流程就出来了：访问网页——JS 读取 Cookie ——如果没有，使用默认皮肤——如果有，使用指定皮肤；用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie 保存。

网页换肤事先需要的准备

首先你可能要准备多套 CSS 样式表文件，当点击换肤按钮的是，使用 JS 来切换对应的 CSS 样式表。之后，就是在网页上增加一个 ul li 列表，用 CSS 修饰一下做成换肤选项。例如：

下面我们就来看具体功能代码。

实现点击切换对应 CSS 功能

html代码，包括点击和下拉2中形式，如下图：

HTML实现代码如下：

<P>请选择下面的下拉菜单测试换肤效果</P><a href=# onclick="changecss('css.css')">css.css</a><a href=# onclick="changecss('css1.css')">css1.css</a><a href=# onclick="changecss('css2.css')">css2.css</a><a href=# onclick="changecss('css3.css')">css3.css</a><br><select onchange="changecss(this.value)"><option>选择样式单文件</option><script language="javascript">var csss=new Array();csss[0]="css.css";csss[1]="css1.css";csss[2]="css2.css";csss[3]="css3.css";var i;for(i=0;i<4;i++)     if(thisskin==csss[i])           document.write("<option value=/""+csss[i]+"/" selected>"+csss[i]+"样式单文件</option>");     else           document.write("<option value=/""+csss[i]+"/">"+csss[i]+"样式单文件</option>");</script></select>

JS代码如下：

function SetCookie(name,value){     var argv=SetCookie.arguments;     var argc=SetCookie.arguments.length;     var expires=(2<argc)?argv[2]:null;     var path=(3<argc)?argv[3]:null;     var domain=(4<argc)?argv[4]:null;     var secure=(5<argc)?argv[5]:false;     document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");}function GetCookie(Name) {     var search = Name + "=";     var returnvalue = "";     if (document.cookie.length > 0) {           offset = document.cookie.indexOf(search);           if (offset != -1) {                       offset += search.length;                 end = document.cookie.indexOf(";", offset);                                         if (end == -1)                       end = document.cookie.length;                 returnvalue=unescape(document.cookie.substring(offset,end));           }     }     return returnvalue;}var thisskin;thisskin=GetCookie("nowskin");if(thisskin!="")     skin.href=thisskin;else     skin.href="css.css";function changecss(url){     if(url!=""){           skin.href=url;           var expdate=new Date();           expdate.setTime(expdate.getTime()+(24*60*60*1000*30));           //expdate=null;                                   //以下设置COOKIES时间为1年,自己随便设置该时间..           SetCookie("nowskin",url,expdate,"/",null,false);     }}

到这里效果代码就完成了，下面可以大家点击查看下具体效果的演示页面。演示查看