使用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 οnlοad="init()"> <div id="main"> ?????? <div id="top"> ?????? <span>紅色<input type="button" id="btRed"?οnclick="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=""不可缺少。
轉載于:https://www.cnblogs.com/helloczh/articles/1590506.html
總結
以上是生活随笔為你收集整理的使用js实现换肤功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java实现颜色Color对象和16进制
- 下一篇： 计算机成绩数字代表什么意思,注册电气工程