JavaScript怎麼改變網頁背景顏色-js教程-PHP中文網

JavaScript怎麼改變網頁背景顏色

青灯夜游

發布： 2022-10-12 17:17:03

原創

19536 人瀏覽過

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

JavaScript怎麼改變網頁背景顏色

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript改變網頁背景顏色

範例1：輸入顏色名稱改變網頁背景色

在一個文字方塊裡面輸入顏色的名稱（如：藍色，紫色），點選文字方塊旁的按鈕，讓網頁的背景色改變成文字方塊中的名稱對應的顏色。

實現程式碼

<!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 &#39;蓝色&#39;: c2="blue"; break;
			case &#39;黄色&#39;: c2="yellow";break;
			case &#39;浅蓝色&#39;:c2="lightblue";break;
			case &#39;紫色&#39;:c2="purple";break;
			case &#39;粉色&#39;: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>

登入後複製

結果圖展示

#已修改之前：

JavaScript怎麼改變網頁背景顏色

## 修改後：

JavaScript怎麼改變網頁背景顏色

說明：

1、在HTML 中，JavaScript 程式碼必須位於 <script> 與 </script> 標籤之間。

2、在程式語言中，變數用來儲存資料值。 JavaScript 使用 var 關鍵字來宣告變數。 = 號用於為變數賦值。

3、找出HTML元素

#方法描述#document.getElementById(透過元素id 來尋找元素document.getElementsByTagName(透過標籤名稱來找出元素


id)
name)

#範例2：用點擊按鈕的方式來改變網頁背景色（簡單）

程式碼

<!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(&#39;pink&#39;)"/>
	<input type="button" value="紫色" onclick="color(&#39;purple&#39;)"/>
	<input type="button" value="蓝色" onclick="color(&#39;blue&#39;)"/>
	<input type="button" value="自定义颜色" onclick="color(&#39;lightblue&#39;)"/>
<body>
</body>
</html>

登入後複製

#結果圖展示

JavaScript怎麼改變網頁背景顏色