JavaScript怎麼改變網頁背景顏色
- 青灯夜游原創
- 2022-01-18 18:57:5719685瀏覽
改變方法：1、使用「document.getElementsByTagName("body")」語句取得到body元素節點；2、使用「body元素節點.style.backgroundColor="顏色值";」語句來改變網頁的背景顏色。
本教學操作環境：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 '蓝色': 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元素
| 描述 | |
|---|---|
| id) | 透過元素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('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怎麼改變網頁背景顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn