视频案例的实现
DOM的作用就是改变html元素的内容 ，如何操作就显得至关重要，通过既定的函数找到需要操作的元素，再改变他的内容，怎么找到这是需要深入理解和吃透的；
<!DOCTYPE html>
<html>
<head>
<title>javascript学习</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<!-- <script type="text/javascript" src="static/a.js"></script> -->
<style type="text/css">
*{margin: 5px;padding: 0;}
#box{
margin:20px 40px;
width: 200px;
height: 200px;
border:0 2px 2px;
background: #000;
}
button{
width: 50px;
height: 20px;
}
</style>
<script type="text/javascript">
var box;
window.onload=function(){
box=document.getElementById('box');
}
function a(){
box.style.height="400px";
}
function b(){
box.style.width="400px";
}
function c(){
box.style.background="skyblue";
}
function d(){
box.style.height="100px";
box.style.width="100px";
box.style.background="red";
}
function e(){
box.style.display="none";
}
function f(){
box.style.display="block";
}
</script>
</head>
<body>
<div>
<div id="box"></div>
<button onclick="a()">变高</button>
<button onclick="b()">变宽</button>
<button onclick="c()">背景色</button>
<button onclick="d()">重置</button>
<button onclick="e()">隐藏</button>
<button onclick="f()">显示</button>
</div>
</body>
</html>