// 改变css,还用了函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>控制DIV样式</title>
<style type='text/css'>
#box{
width:300px;
height:300px;
background:red;
margin:20px 0;
}
</style>
</head>
<body>
<div id="box"></div>
<input type='button' value='变宽' onclick="aa()">
<input type='button' value='变高' onclick="bb()">
<input type='button' value='变色' onclick="cc()">
<input type='button' value='重置' onclick="dd()">
<input type='button' value='隐藏' onclick="ee()">
<input type='button' value='显示' onclick="ff()">
</body>
<script type='text/javascript'>
var box;
window.onload=function (){
box=document.getElementById("box");
}
function aa(){
box.style.width = "600px";
}
function bb(){
box.style.height = '600px';
}
function cc(){
box.style.background = "black";
}
function dd(){
box.style.height = '300px';
box.style.width = '300px';
box.style.background = 'red';
}
function ee(){
box.style.display = "none";
}
function ff(){
box.style.display = "block";
}
</script>
</html>