案例模仿,用点击事件控制div样式
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>用按钮控制div的高度、宽度、颜色、重置、隐藏、显示</title>
<style>
#box{
width:100px;
height:100px;
background:#ccc;
margin:20px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="变高" onclick="hei_()" />
<input type="button" value="变宽" onclick="wid_()" />
<input type="button" value="变色" onclick="col_()" />
<input type="button" value="重置" onclick="cho_()" />
<input type="button" value="隐藏" onclick="dis_1()" />
<input type="button" value="显示" onclick="dis_2()" />
<script type="text/javascript">
//改变高度
function hei_(){
document.getElementById("box").style.height="200px";
}
//改变宽度
function wid_(){
document.getElementById("box").style.width="200px";
}
//改变背景颜色
function col_(){
document.getElementById("box").style.background="red";
}
//重置，即将之前改变的高、宽、颜色恢复原来的属性值
function cho_(){
document.getElementById("box").style.height="100px";
document.getElementById("box").style.width="100px";
document.getElementById("box").style.background="#ccc";
}
//隐藏模块
function dis_1(){
document.getElementById("box").style.display="none";
}
//显示模块
function dis_2(){
document.getElementById("box").style.display="block";
}
</script>
</body>
</html>