编写js的流程：
1.布局：HTML+CSS（最好不要出现兼容问题）
2.属性：确定要修改哪些属性
3.事件：确定用户做哪些操作
4.编写JS：在事件中，用JS来修改页面元素的样式
<input type="checkbox" onmouseover="div1.style.display=‘block‘" onmouseout="div1.style.display=‘none‘">
现在在Chrome下可以直接拿到id进行元素属性操作，Firefox，ie等与此不兼容
在老版本的Chrome也不支持直接拿到id进行元素属性操作,采用document.getElementById("div1")
而且直接在事件内写代码会很乱,采用函数调用 --function toShow(){}--定义
onmouseover="toShow()"--调用
起函数名最好可读性高一点，方便多代码的时候查找错误和更改样式
特效实现原理：响应用户操作，对页面元素（标签）进行某种修改
document.getElementById("div1").style.display="block";
document.getElementById("div1").style.width="300px";
document.getElementById("div1").style.height="200px";
采用变量进行重用 var oDiv = document.getElementById("div1");
oDiv.style.display="block"；
简化代码;