文档宽高和窗口事件

来源:互联网 发布:阿里云网络电视说明书 编辑:程序博客网 时间:2024/05/21 13:56

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++;}
0 0
原创粉丝点击