How to change the background color of a web page with JavaScript-JS Tutorial-php.cn

How to change the background color of a web page with JavaScript

青灯夜游

Release： 2022-10-12 17:17:03

Original

19519 people have browsed it

Change method: 1. Use the "document.getElementsByTagName("body")" statement to obtain the body element node; 2. Use the "body element node.style.backgroundColor="color value";" statement to change The background color of the web page.

How to change the background color of a web page with JavaScript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

JavaScript to change the web page background color

Example 1: Enter the color name to change the web page background Color

Enter the name of the color in a text box (such as: blue, purple), click the button next to the text box to change the background color of the web page to the name in the text box corresponding color.

Implementation code

<!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>

Copy after login

Result diagram display

Before modification:

How to change the background color of a web page with JavaScript

After modification:

How to change the background color of a web page with JavaScript

Instructions:

1. In HTML , the JavaScript code must be between the <script> and </script> tags.

2. In programming languages, variables are used to store data values. JavaScript uses the var keyword to declare variables. The = sign is used to assign a value to a variable.

3. Find HTML elements

Method	Description
document.getElementById(id)	Find the element by element id
document.getElementsByTagName(name)	Find elements by tag name

Example 2: Change the background color of the web page by clicking a button (simple )

Code

<!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>

Copy after login

Result Picture Display

How to change the background color of a web page with JavaScript

[Related recommendations: javascript learning tutorial]

The above is the detailed content of How to change the background color of a web page with JavaScript. For more information, please follow other related articles on the PHP Chinese website!