JavaScript控制DIV样式案例的练习，以及过程中遇到的一些问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="shortcut icon" type="image/x-icon" href="">
<style type="text/css">
#box{background: pink;width: 200px;height: 200px;margin: 20px 80px;}
</style>
<body>
<div id="box"></div>
<input type="button" name="高度" value="高度" onclick="changeHeight()">
<input type="button" name="宽度" value="宽度" onclick="changeWidth()">
<input type="button" name="颜色" value="颜色" onclick="changeColor()">
<input type="button" name="重置" value="重置" onclick="resetBox()">
<input type="button" name="隐藏" value="隐藏" onclick="hiddenBox()">
<input type="button" name="显示" value="显示" onclick="showBox()">
<script type="text/javascript">
var box;
window.onload = function () {
box = document.getElementById("box");
}
function changeHeight(){
box.style.height ="400px";
}
function changeWidth(){
box.style.width ="400px";
}
function changeColor(){
box.style.background ="skyblue";
}
function resetBox(){
box.style.width ="200px";
box.style.height ="200px";
box.style.background ="pink";
}
function hiddenBox(){
box.style.display ="none";
}
function showBox(){
box.style.display ="block";
}
</script>
</body>
</html>
总结：在编写过程中，我一开始给重置、隐藏和显示的点击事件命名为reset()、hidden()、show()。但在实际显示过程中，谷歌浏览器会对hidden()有错误提示“Uncaught TypeError: hidden is not a function at HTMLInputElement.onclick”，这个问题出现，查了一下网上资料，hidden ()和谷歌一些内置的有冲突，然后修改了一下方法名，编译通过，没有错误。
从这个中，知道了在编写js代码时要注意方法的命名，防止出现与浏览器冲突的情况。