# 網頁背景換膚
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>范例 5-5</title>
<script language="javascript">
function ChangeBgColor( colorIndex )
{
var dombody = document.getElementById( "PageBody" ); // 獲取body節點
if( dombody == null ) // 如果沒有body節點將直接返回
{
return;
}
else // body節點成功獲取
{
switch( colorIndex ) // 使用多路開關語句根據菜單傳入的值更改網頁背景
{
case 1:
dombody.style.background = "#666666"; // 通過設定style元素的background屬性以改變背景
break;
case 2:
dombody.style.background = "#003333";
break;
case 3:
dombody.style.background = "#ccccff";
break;
case 4:
dombody.style.background = "#6699cc";
break;
default:
dombody.style.background = "white"; //
break;
}
}
}
</script>
</head>
<body id="PageBody" style="background:red"><!--設定body節點的ID，以便在JavaScript代碼中操作-->
<!--各顏色菜單，用戶點擊菜單時，背景顏色將變為與菜單相同的顏色-->
<div style="width: 100px; height: 20px; text-align:center; background-color: #666666;" onclick="return ChangeBgColor( 1 )">
</div>
<div style="width: 100px; height: 20px; text-align:center; background-color: #003333;" onclick="return ChangeBgColor( 2 )">
</div>
<div style="width: 100px; height: 20px; text-align:center; background-color: #ccccff;" onclick="return ChangeBgColor( 3 )">
</div>
<div style="width: 100px; height: 20px; text-align:center; background-color: #6699cc;" onclick="return ChangeBgColor( 4 )">
</div>
</body>
</html>
~~~
