javascript控制DIV样式

abstract：<!DOCTYPE html> <html> <head> <title>javascript控制DIV样式</title> <style type="text/css"> #box{ width: 100px; height: 100px;

<!DOCTYPE html>
<html>
<head>
	<title>javascript控制DIV样式</title>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background:red;
			margin: 20px 80px;
		}
	</style>
</head>
<body>

	<script type="text/javascript">
		var box;
		window.onload = function(){
			box = document.getElementById('box');			
		}

		function aa(){
			box.style.height = '400px'; // 改变高度
		}
		function bb(){
			box.style.width = '400px';  // 改变宽度
		}
		function cc(){
			box.style.background = 'pink';  // 改变颜色
		}
		function dd(){
			box.style.height = '100px';
			box.style.width = '100px';  // 重置
			box.style.background = 'red';
		}
		function ee(){						// 隐藏
			box.style.display = 'none';
		}
		function ff(){						// 显示
			box.style.display = 'block';
		}

	</script>
	<input type="button" onclick="aa()" value="变高">
	<input type="button" onclick="bb()" value="变宽">
	<input type="button" onclick="cc()" value="变色">
	<input type="button" onclick="dd()" value="重置">
	<input type="button" onclick="ee()" value="隐藏">
	<input type="button" onclick="ff()" value="显示">
	<div id="box"></div>

</body>
</html>

Correcting teacher：查无此人Correction time：2019-05-10 14:14:09
Teacher's summary：完成的不错。js非常强大，要多练习。继续加油。

javascript控制DIV样式

Popular Entries