javascript控制div样式

Original 2019-05-13 11:36:01 195
abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css"&
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			border: 1px solid #000;
			margin: 30px;
		}

	</style>
</head>
<body>
	<div id="box"></div>
	<input type="button" value="变高" name="" onclick="he()">
	<input type="button" value="变宽" name="" onclick="wd()">
	<input type="button" value="变色" name="" onclick="bg()">
	<input type="button" value="重置" name="" onclick="cz()">
	<input type="button" value="隐藏" name="" onclick="dn()">
	<input type="button" value="显示" name="" onclick="db()">
<script type="text/javascript">
	var box;
	window.onload=function(){
		box=document.getElementById('box');
	}
	function he(){
		box.style.height='200px';
	}
	function wd(){
		box.style.width='200px';
	}
	function bg(){
		box.style.background='green';
	}
	function cz(){
		box.style.height='100px';
		box.style.width='100px';
		box.style.background='#fff';
	}
	function dn(){
		box.style.display='none';
	}
	function db(){
		box.style.display='block';
	}
</script>
</body>
</html>


Correcting teacher:查无此人Correction time:2019-05-14 09:21:59
Teacher's summary:完成的不错。js点击事件很强大,多研究研究。继续加油。

Release Notes

Popular Entries