js控制DIV
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制DIV</title>
<style type="text/css">
#box{
height:100px;
width:100px;
background:red;
margin-top:20px;
margin-left:100px;
}
#pass{
margin-left:20px;
}
[value]{
margin-top:10px;
margin-left:5px;
}
</style>
</head>
<body>
<script type="text/javascript">
var mydiv;
window.onload=function(){
mydiv=document.getElementById('box');}
function bg(){
mydiv.style.height="200px";}
function bk(){
mydiv.style.width="200px";}
function bs(){
mydiv.style.background="pink";}
function by(){
mydiv.style.borderRadius="100px";}
function yc(){
mydiv.style.display="none";}
function xs(){
mydiv.style.display="block";}
</script>
<div id="box"></div>
<div id="pass">
<input type="button" value="变高" onclick="bg()"/>
<input type="button" value="变宽" onclick="bk()"/>
<input type="button" value="变色" onclick="bs()"/>
<input type="button" value="变圆" onclick="by()"/>
<input type="button" value="隐藏" onclick="yc()"/>
<input type="button" value="显示" onclick="xs()"/>
</div>
</body>
</html>