首页 >> 文档 >> XHTML/CSS专题

实时切换CSS样式实现实时换肤

发布日期:2008-07-17最近更新:2008-07-17来源:BHCODE作者:

早期的论坛换肤原理是通过服务端配合来做,现在很多论坛开始用JS实时切换CSS样式来达到换肤的效果,现在通过一个实例来说明如何用JS来实现换肤效果

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>实时切换CSS样式 实现CSS换肤的实例</title>
<link id="bhcode" rel="stylesheet" type="text/css" href="a.css">
</head>

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


a.css的代码如下:

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


b.css的代码如下:

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

本周推荐
MORE
热点关注
MORE