使用js实现换肤功能
Skin.html
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页焕肤</title> <style type="text/css"> #main { width:800px; height:600px; margin:auto; font-family:"新宋体"; font-size:15px; } #top { width:800px; height:30px; border:1px #666666 solid; border-bottom:1px #333333 dotted; } #bottom { width:800px; height:669px; border-top:0px; border:1px #666666 solid; } #btRed,#btGreen,#btBlue { width:30px; height:15px; border:1px #999999 solid; } #btRed { background-color:#FF0000; } #btGreen { background-color:#00FF00; } #btBlue { background-color:#0000FF; } span { margin-right:2px; float:right; } </style> <link id="cssStyle" type="text/css" rel="stylesheet" href=""/> <script type="text/javascript"> function init() { /*当第一次加载网页的时候，随机产生一个样式表使用*/ var skinArray=["red","green","blue"]; var index=Math.floor(Math.random()*skinArray.length); var cssName=skinArray[index]; //document.getElementById("cssStyle").href=cssName+".css"; document.styleSheets[1].href=cssName+".css"; } function changeSkin(cssName) { //document.getElementById("cssStyle").href=cssName+".css"; document.styleSheets[1].href=cssName+".css"; } </script> </head> <body onload="init()"> <div id="main"> <div id="top"> <span>红色<input type="button" id="btRed" onclick="changeSkin('red')"/></span> </div> <div id="bottom"> </div> </div> </body> </html> |
Blue.css
|
#bottom { background-color:#0000FF; } |
Green.css
|
#bottom { background-color:#00FF00; } |
本案例的要点为，同时为页面准备多个皮肤(css)，当首次加载页面的时候随机添加一个皮肤，然后当点击对应的皮肤的时候加载对应的样式。同时<link rel="stylesheet" type="text/css" href=""/>中href=""不可缺少。
