Javascript控制DIV样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript控制DIV样式</title>
<style type="text/css">
#box{width: 100px;
height: 100px;
background: #ccc;
margin: 30px 90px;}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="ChangeHeight()">改变高度</button>
<button onclick="ChangeWidth()">改变宽度</button>
<button onclick="ChangeColor()">改变颜色</button>
<button onclick="reset()">重置</button>
<button onclick="conceal()">隐藏</button>
<button onclick="show()">显示</button>
<script type="text/javascript">
var box;
window.onload=function(){
box=document.getElementById("box")
}
function ChangeHeight(){
box.style.height="200px"
}
function ChangeWidth(){
box.style.width="200px"
}
function ChangeColor(){
box.style.background="pink"
}
function reset(){
box.style.height="100px"
box.style.width="100px"
box.style.background="#ccc"
}
function conceal(){
box.style.display="none"
}
function show(){
box.style.display="block"
}
</script>
</body>
</html>总结：万事皆非易事，需多多练习。