通过按钮实时切换CSS样式 实现CSS换肤的实例

CSS换肤技术一直是一个比较热门的话题，通过给HTML文档不同的CSS样式应用，实现完全不同或风格迥异的页面效果。这样的技术一直为大家所津津乐道。今天所讲的是用按钮来实现简单的换肤。或许实用性并不强，不能写入cookies，就不能按用户的意愿保存下来，每一次刷新将回到默认的风格样式。但大家可以学习其原理，了解它的工作方式。

我们来看今天的案例。在页面中建立一个容器，赋予id为wrap。在里面放两个按钮，通过点击按钮触发HTML文件调用不同的CSS，从而实现换肤的效果。

这两个按钮如图所示。

　　在默认状态下是a.css。点击按钮后，则应用所点击按钮定义的样式。

一种是蓝色的背景图片，一种是橙色的背景图片。这两者使页面具有了不同的风格气息。
　　HTML代码如下：

<div id="wrap">
   <input type=button value="a.css" onclick="document.all.MrJin.href='a.css'"><br> 
   <input type=button value="b.css" onclick="document.all.MrJin.href='b.css'"> 
</div>

a.css的代码如下：

body { margin:0; padding:0; background:url(bg_a.gif);}
#wrap { height:600px; background:url(52css.jpg) no-repeat center center;}

b.css的代码如下：

body { margin:0; padding:0; background:url(bg_b.gif);}
#wrap { height:600px; background:url(52css.jpg) no-repeat center center;}