當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用js实现换肤功能

發(fā)布時間：2023/12/10 编程问答 32 豆豆

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

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()

{

?????? /*當(dāng)?shù)谝淮渭虞d網(wǎng)頁的時候，隨機(jī)產(chǎn)生一個樣式表使用*/

?????? 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>藍(lán)色<input type="button" id="btBlue" οnclick="changeSkin('blue')" />?</span>
　　 <span>網(wǎng)頁換膚:</span>

?????? </div>

?????? <div id="bottom">

????? </div>

</div>

</body>

</html>

Blue.css

#bottom

{

?????? background-color:#0000FF;

}

Green.css

#bottom

{

?????? background-color:#00FF00;

}

本案例的要點(diǎn)為，同時為頁面準(zhǔn)備多個皮膚(css)，當(dāng)首次加載頁面的時候隨機(jī)添加一個皮膚，然后當(dāng)點(diǎn)擊對應(yīng)的皮膚的時候加載對應(yīng)的樣式。同時<link rel="stylesheet" type="text/css"? href=""/>中href=""不可缺少。

轉(zhuǎn)載于:https://www.cnblogs.com/helloczh/articles/1590506.html

總結(jié)

以上是生活随笔為你收集整理的使用js实现换肤功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java实现颜色Color对象和16进制
下一篇：计算机成绩数字代表什么意思,注册电气工程