原生js练习 网页换肤

原生js练习 网页换肤


写的很烂,没有要点


效果:

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				height: 100%;
				width: 100%;
				
			}
			#main{
				height: 720px;
				width: 100%;
				background-color: pink;
			}
			button{
				height: 15px;
				width: 15px;
				border: 1px solid #fff;
				margin: 10px 10px;
				
			}
			#red{
				background-color: red;
			}
			#green{
				background-color: green;
			}
			#blue{
				background-color: blue;
			}
			
		</style>
	</head>
	<body>
		<div id="main">
			<button type="button" id="red" onclick="red()"></button>
			<button type="button" id="green" onclick="green()"></button>
			<button type="button" id="blue" onclick="blue()"></button>
		</div>
		
		<script type="text/javascript">
			var x=document.getElementById('main');
			function red(){
				x.style.backgroundColor='red';
				
				document.getElementById('red').style.border="3px solid white";
				document.getElementById('green').style.border="1px solid white";
				document.getElementById('blue').style.border="1px solid white";
				
			}
			function green(){
				x.style.backgroundColor='green';
				document.getElementById('green').style.border="3px solid white";
				document.getElementById('red').style.border="1px solid white";
				document.getElementById('blue').style.border="1px solid white";
			}
			function blue(){
				x.style.backgroundColor='blue';
				document.getElementById('blue').style.border="3px solid white";
				document.getElementById('red').style.border="1px solid white";
				document.getElementById('green').style.border="1px solid white";
			}
		</script>
	</body>
</html>

你可能感兴趣的:(JavaScript)