改變方法:1、使用「document.getElementsByTagName("body")」語句取得到body元素節點;2、使用「body元素節點.style.backgroundColor="顏色值";」語句來改變網頁的背景顏色。

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
JavaScript改變網頁背景顏色
範例1:輸入顏色名稱改變網頁背景色
在一個文字方塊裡面輸入顏色的名稱(如:藍色,紫色),點選文字方塊旁的按鈕,讓網頁的背景色改變成文字方塊中的名稱對應的顏色。
實現程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!doctype html>
<html>
<head>
<meta charset= "utf-8" >
<title>网页变色</title>
<script type= "text/javascript" >
function show(){
var x=document.getElementsByTagName( "body" );
var y=document.getElementById( "i1" );
var c1=document.getElementById( "i2" ).value; <!--获取文本框中的值-->
var c2;
switch (c1){
case '蓝色': c2= "blue" ; break ;
case '黄色': c2= "yellow" ; break ;
case '浅蓝色':c2= "lightblue" ; break ;
case '紫色':c2= "purple" ; break ;
case '粉色':c2= "pink" ; break ;
}
y.style.backgroundColor=c2;
}
</script>
</head>
<body id= "i1" style= "background-color:#D6A4E9" > <!-- 网页的原始背景色-->
<div align= "center" >
<input type= "text" id= "i2" >
<input type= "button" value= "改变颜色" onclick= "show()" >
</div>
</body>
</html>
|
登入後複製
結果圖展示
#已修改之前:

## 修改後:


說明:
1、在HTML 中,JavaScript 程式碼必須位於 <script> 與 </script> 標籤之間。
2、在程式語言中,變數用來儲存資料值。 JavaScript 使用 var 關鍵字來宣告變數。 = 號用於為變數賦值。
3、找出HTML元素
#方法描述#document.getElementById(透過元素id 來尋找元素document.getElementsByTagName(透過標籤名稱來找出元素
#範例2:用點擊按鈕的方式來改變網頁背景色(簡單)
程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!doctype html>
<html>
<head>
<meta charset= "utf-8" >
<title>改变网页背景色</title>
<script>
function color(str){
document.body.style.backgroundColor=str;
}
</script>
</head>
<input type= "button" value= "粉红色" onclick= "color('pink')" />
<input type= "button" value= "紫色" onclick= "color('purple')" />
<input type= "button" value= "蓝色" onclick= "color('blue')" />
<input type= "button" value= "自定义颜色" onclick= "color('lightblue')" />
<body>
</body>
</html>
|
登入後複製
#結果圖展示

###### #【相關推薦:###javascript學習教學######】#######
以上是JavaScript怎麼改變網頁背景顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!