文档宽高和窗口事件

1.clientHeight[width] : 可视区宽高

alert(document.documentElement.clientHeight)

2 scrollTop[left] ： 滚动条滚动的距离，存在兼容性问题，在ff，ie下认为滚动条是在documentElement元素上，而chrome则认为存在body上

//解决兼容性问题
var scroll = document.documentElement.scrollTop || document.body.scrollTop;

3.scrollHeight[width] ： 内容的宽高
html部分

<div id="div1" style="width:100px;height:100px;border: 1px solid red;padding:10px;">
    <div id="div2" style="width:100px;height:200px;background:green"></div>
</div>

内容高其实就是div1的高度+溢出部分的高度 –>210，如果给div1加上一个overflow：hidden，ff、ie还是为210，但chrome则为220，多一个padding

4.offsetHeight[width] ： 文档的宽高

 alert(document.documentElement.offsetHeight)
 //在body去掉默认样式的情况下也可写成下面这样
 alert(document.body.offsetHeight)

5.onscroll : 当滚动条滚动时触发,在一定的时间内触发一次，而不是每滚动多少距离触发一次

var i = 0;
window.onscroll = function(){
    document.title = i++;
}

6.onresize : 当窗口大小发生变化时触发

var j = 0;
 window.onresize = function(){
    document.title = j++;
}