Web Standard HACKS专题文章

——此专题属于Web Standard（网页标准）分类，记录着余弦在web开发过程中总结出的技巧。

今天来看看如何实现WEB换肤功能。大家先看www.chinaren.com网站首页，WEB客户端交互技术在ChinaRen首页运用的太酷了！下面截图是ChinaRen首页的换肤功能模块：

默认的是橙色皮肤，你点击小油桶左边的“颜色小格”，ChinaRen的首页将切换为对应的颜色皮肤。这时页面是不用刷新的，这不是AJAX（记住：“不刷新就是AJAX技术”这个说法是错误的！）。这是简单的JavaScript DOM技术：利用JavaScript来获得<link>标签中的href属性节点（属于DOM节点），动态加载对应的CSS文件，而被加载的CSS文件就是“皮肤”的核心了！

原理就是这样，很简单。那要如何实现？我分析了ChinaRen首页的“换肤”机制与COSBlog.COM封面的换肤机制其实是一样的。不过COSBlog.COM封面暂时没有Cookies记录功能，即无法记录用户自定义的皮肤样式。这个下次有时间再实现，我们现在要做的是了解“换肤机制”的核心。下面以COSBlog.COM来说明吧。

1、有三个文件：www.cosblog.com/index.html、www.cosblog.com/white.css、www.cosblog.com/black.css。其中white.css与black.css分别定义了index.html页面的“白色风格”皮肤与“黑色风格”皮肤。

2、index.html中的logo是“换肤”事件的触发对象：即点击logo可以切换index.html的页面风格。下图为“白色风格”的截图：

点击COSBlog.COM的logo后，index.html将变为“黑色风格”，如下图：

3、为什么点击logo后会触发“换肤”事件呢？看下面logo对应的代码：

<a href="#"><img onclick="javascript:changeSkin('black');reValue(1);return false;" id="logo_pic" src="logo.jpg" border="0" /></a>

onclick事件发生时，触发了changeSkin('black')、reValue(1)两个功能函数，这两个功能函数如下：

function $(d){return document.getElementById(d);}
//定义$()函数，因为document.getElementById()太常用了，所以我们可以定义好记的$()来代替。$()表示要获得的HTML的DOM节点对象。
function changeSkin(skin){
css=$("skin");
css.href=skin+".css";
}
//定义changeSkin()函数，目的是动态加载参数"skin"指定的css文件。这里我们要加载的对象就是white.css或black.css。
function reValue(x){
switch(x)
{
case 1:
$('logo').innerHTML="<a href=\"#\"><img onclick=\"javascript:changeSkin('white');reValue(2);return false;\" id=\"logo_pic\" src=\"logo1.jpg\" border=\"0\" /></a>";
break;
case 2:
$('logo').innerHTML="<a href=\"#\"><img onclick=\"javascript:changeSkin('black');reValue(1);return false;\" id=\"logo_pic\" src=\"logo.jpg\" border=\"0\" /></a>";
}
}
//定义reValue()函数，这个函数是为了初始化logo对应的代码。这个不是很重要，重点在changeSkin()函数。

4、好，有了JavaScript功能函数，那changeSkin()在具体完成什么样的功能呢？我们继续看onclick触发的changeSkin('black')函数，传进一个实参"black"，于是在changeSkin(skin)函数体内发生如下动作：

css=$("skin");    //$("skin")获得的是HTML页面中id为"skin"的DOM节点对象
css.href=“black.css";    //将id为"skin"的DOM节点对象的href属性值变为"black.css"，这样就成功加载了black.css文件，于是就“换肤”了。

HTML页面中id为"skin"的DOM节点对象代码如下：

<link href="white.css" rel="stylesheet" type="text/css" id="skin"/>

很简单吧？核心就在于你要如何实现动态加载对应的css文件，css文件是皮肤的核心！一个网站要换皮肤，有时候不仅仅css文件要切换，一些图片、Flash等都需要切换。这个时候需要编写的JavaScript代码会扩展，比如上面的reValue()函数。这个就不细讲了，有兴趣的朋友自己研究吧。余弦要说的都已经说了^^。