當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用js实现换肤功能

發布時間：2023/12/10 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了使用js实现换肤功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Skin.html

<head>

#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>

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>

?????? <div id="top">

?????? <span>紅色<input type="button" id="btRed"?οnclick="changeSkin('red')"/></span>
　　 <span>綠色<input type="button" id="btGreen" οnclick="changeSkin('green')"/></span><span>藍色<input type="button" id="btBlue" οnclick="changeSkin('blue')" />?</span>
　　 <span>網頁換膚:</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进制
下一篇：计算机成绩数字代表什么意思,注册电气工程