javacript一鍵換膚

時間 2019-11-24

標籤 javacript 一鍵欄目 Java 简体版

原文原文鏈接

<html xmlns="http://www.w3.org/1999/xhtml">javascript

<head>css

<title>網頁煥膚</title>java

#mainui

{spa

width:800px;xml

height:600px;htm

margin:auto;ip

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>

</div>

</body>

</html>

Blue.css

#bottom

{

background-color:#0000FF;

}

Green.css

#bottom

{

background-color:#00FF00;

}

本案例的要點爲，同時爲頁面準備多個皮膚(css)，當首次加載頁面的時候隨機添加一個皮膚，而後當點擊對應的皮膚的時候加載對應的樣式。同時<link rel="stylesheet" type="text/css" href=""/>中href=""不可缺乏。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。