早期的论坛换肤原理是通过服务端配合来做,现在很多论坛开始用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;}