<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变DIV样式</title>
<script>
// 声明全局变量，让后面函数共同调用
var box1
window.onload=function(){
box1 =document.getElementById('box');
};
// 去调用全局变量
function one() {
box1.style.height='300px';
};
function two() {
box1.style.width='300px';
};
function there() {
box1.style.background='lightpink';
};
function four() {
box1.style.width='150px';
box1.style.height='150px';
box1.style.background='lightskyblue';
};
function five() {
box1.style.display='none';
};
function six() {
box1.style.display='block';
}
</script>
<style>
#box{width: 150px;height: 150px;background: lightskyblue;margin:10px 60px}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="one()">变高</button>
<button onclick="two()">变宽</button>
<button onclick="there()">变色</button>
<button onclick="four()">重置</button>
<button onclick="five()">隐藏</button>
<button onclick="six()">显示</button>
</body>
</html>
