更改背景颜色

时间：2022-12-20 15:32:40
<html>
	<head>
		<title>更改背景颜色</title>
		 
		<script>
			function change1(){
				//获取body节点对象
				var bodyNode = document.getElementsByTagName("body")[0];
				//alert(bodyNode);
				//alert(bodyNode.nodeName);
				
				//改变背景颜色
				bodyNode.bgColor = "#ff0000";
			}
			
			function change2(){
				//获取body节点对象
				var bodyNode = document.getElementsByTagName("body")[0];
				//alert(bodyNode);
				//alert(bodyNode.nodeName);
				
				//改变背景颜色
				bodyNode.bgColor = "#00ff00";
			}
			
			function change3(){
				//获取body节点对象
				var bodyNode = document.getElementsByTagName("body")[0];
				//alert(bodyNode);
				//alert(bodyNode.nodeName);
				
				//改变背景颜色
				bodyNode.bgColor = "#0000ff";
			}
			
			function change4(){
				//获取body节点对象
				var bodyNode = document.getElementsByTagName("body")[0];
				//alert(bodyNode);
				//alert(bodyNode.nodeName);
				
				//改变背景颜色
				bodyNode.style.backgroundColor   = "#ff0000";
			}
			
			function change5(){
				//获取body节点对象
				var bodyNode = document.getElementsByTagName("body")[0];
				//alert(bodyNode);
				//alert(bodyNode.nodeName);
				
				//改变背景颜色
				bodyNode.style.backgroundColor  = "#00ff00";
			}
			
			function change6(){
				//获取body节点对象
				var bodyNode = document.getElementsByTagName("body")[0];
				//alert(bodyNode);
				//alert(bodyNode.nodeName);
				
				//改变背景颜色
				bodyNode.style.backgroundColor  = "#0000ff";
			}
			
			function change(c){
				var bodyNode = document.getElementsByTagName("body")[0];
				bodyNode.style.backgroundColor = c;
			}
			
			function aotochange(c){
				var bodyNode = document.getElementsByTagName("body")[0];
				bodyNode.style.backgroundColor = c;
			}
		</script>
	</head>
	
	<body>
	
	更改背景颜色<br/>
	通过bgColor设置：
		 <input type="button" value="red" onclick="change1()">
		<input type="button" value="green" onclick="change2()">
		<input type="button" value="blue" onclick="change3()">
		<hr/>
	通过style设置；	
		<input type="button" value="red" onclick="change4()">
		<input type="button" value="green" onclick="change5()">
		<input type="button" value="blue" onclick="change6()">
		<hr/>
	传入参数：
		<input type="button" value="red" onclick="change('#ff0000')">
		<input type="button" value="green" onclick="change('#00ff00')">
		<input type="button" value="blue" onclick="change('#0000ff')">
		
		<hr/>
	通过鼠标悬浮响应事件：
		<input type="button" value="red" onmousemove="aotochange('#ff0000')">
		<input type="button" value="green" onmousemove="aotochange('#00ff00')">
		<input type="button" value="blue" onmousemove="aotochange('#0000ff')">
		
		
		
	</body>
	
</html>

标签：

相关文章