更改背景颜色

向右看齐 2022-09-19 12:06 211阅读 0赞

<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" οnclick="change1()">
    		<input type="button" value="green" οnclick="change2()">
    		<input type="button" value="blue" οnclick="change3()">
    		<hr/>
    	通过style设置；	
    		<input type="button" value="red" οnclick="change4()">
    		<input type="button" value="green" οnclick="change5()">
    		<input type="button" value="blue" οnclick="change6()">
    		<hr/>
    	传入参数：
    		<input type="button" value="red" οnclick="change('#ff0000')">
    		<input type="button" value="green" οnclick="change('#00ff00')">
    		<input type="button" value="blue" οnclick="change('#0000ff')">
    		
    		<hr/>
    	通过鼠标悬浮响应事件：
    		<input type="button" value="red" οnmοusemοve="aotochange('#ff0000')">
    		<input type="button" value="green" οnmοusemοve="aotochange('#00ff00')">
    		<input type="button" value="blue" οnmοusemοve="aotochange('#0000ff')">
    		
    		
    		
    	</body>
    	
    </html>