我的JavaScript控制DIV样式案例与总结

摘要：基本思路（1）创立一个<div></div>盒子，在div中给一id，命名为box。在JavaScript函数内部定义一个名为example的变量，并令其为全局变量。<div id="box"></div>var example window.onload=function(){ example=docu

基本思路

（1）创立一个<div></div>盒子，在div中给一id，命名为box。在JavaScript函数内部定义一个名为example的变量，并令其为全局变量。

<div id="box"></div>

var example
	window.onload=function(){
		example=document.getElementById("box")
		
	}

（2）在JS中定义7个函数，分别有让此<div>变长、变宽、变色、变圆、重置、隐藏、显示这7种功能，并在<input>标签中的type属性给之为botton有点击的效果。

<div id="box"></div>

	<input type="button" value="变长" onclick="longer()">
	<input type="button" value="变宽" onclick="wider()">
	<input type="button" value="变色" onclick="discoloration()">
	<input type="button" value="变圆" onclick="circle()">
	<input type="button" value="重置" onclick="reset()">
	<input type="button" value="隐藏" onclick="hide()">
	<input type="button" value="显示" onclick="display()">

function longer(){
		box.style.height="400px"
	}

	function wider() {
		box.style.width="400px"//改变宽度
	}

	function discoloration(){
		box.style.background="#5EBEFA"
	}

	function circle(){
		box.style.borderRadius="200px"
	}

	function reset(){
		box.style.height="100px"
		box.style.width="100px"
		box.style.background="pink"
		box.style.borderRadius="0px"
	}

	function hide(){
		box.style.display="none"
	}

	function display(){
		box.style.display="block"
	}

（3）在<style></style>中给box、input相应显示的样式，编写好这些代码后，在HTML页面能实现这7个功能。

*{margin: 0px;padding: 0px;}
	#box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
	input{width: 60px;height: 40px;font-family: tahoma, arial, 'Hiragino Sans GB', 黑体, sans-serif;border: 1px solid blue;margin: 0px auto;margin-left: 175px;}

完整代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JavaScript控制DIV样式</title>
	<style type="text/css">
	*{margin: 0px;padding: 0px;}
	#box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
	input{width: 60px;height: 40px;font-family: tahoma, arial, 'Hiragino Sans GB', 黑体, sans-serif;border: 1px solid blue;margin: 0px auto;margin-left: 175px;}
	</style>
</head>
<body>

	<div id="box"></div>

	<input type="button" value="变长" onclick="longer()">
	<input type="button" value="变宽" onclick="wider()">
	<input type="button" value="变色" onclick="discoloration()">
	<input type="button" value="变圆" onclick="circle()">
	<input type="button" value="重置" onclick="reset()">
	<input type="button" value="隐藏" onclick="hide()">
	<input type="button" value="显示" onclick="display()">

<script type="text/javascript">

	var example
	window.onload=function(){
		example=document.getElementById("box")
		
	}

	function longer(){
		box.style.height="400px"
	}

	function wider() {
		box.style.width="400px"//改变宽度
	}

	function discoloration(){
		box.style.background="#5EBEFA"
	}

	function circle(){
		box.style.borderRadius="200px"
	}

	function reset(){
		box.style.height="100px"
		box.style.width="100px"
		box.style.background="pink"
		box.style.borderRadius="0px"
	}

	function hide(){
		box.style.display="none"
	}

	function display(){
		box.style.display="block"
	}

</script>
</body>
</html>

批改老师：天蓬老师批改时间：2018-11-18 09:27:01
老师总结：作业合格，不过在实践中，尽量不要使用全局变量，不容易控制，有可能带来很多意想不到的问题

我的JavaScript控制DIV样式案例与总结

热门词条