用js实现切换css样式文件达到实时网页换肤效果:
代码很简单,就是用javascript动态改变link中href的内容达到实时切换网页皮肤的效果.
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>用js实现切换css样式文件达到实时网页换肤效果-php自学网</title>
<link id="phpzixue" rel="stylesheet" type="text/css" href="http://secyaher.blog.163.com/blog/a.css">
</head>
<body>
<div id="wrap">
<input type=button value="a.css" onclick="document.all.phpzixue.href='http://secyaher.blog.163.com/blog/a.css'"><br>
<input type=button value="b.css" onclick="document.all.phpzixue.href='http://secyaher.blog.163.com/blog/b.css'">
</div>
</body>
</html>
a.css的代码如下：
body { margin:0; padding:0; background:url(bg_a.gif);}
#wrap { height:600px; background:url(phpzixue1.jpg) no-repeat center center;}
b.css的代码如下：
body { margin:0; padding:0; background:url(bg_b.gif);}
#wrap { height:600px; background:url(phpzixue2.jpg) no-repeat center center;}
此文章由 http://www.ositren.com 收集整理 ,地址为:
http://www.ositren.com/htmls/68456.html