常用的BOM方法

1.可视区域尺寸

1.1 DOM方法:

document.documentElement.clientWidth        //可视区域的宽
document.documentElement.clientHeight       //可视区域的高

1.2 BOM方法:(适用于高版本浏览器)

window.innerWidth                           
window.innerHeight

1.3 元素的宽高

offsetWidth/offsetHeight            //包含边框
clientWidth/clientHeight            //不包含边框

2.滚动距离

获取滚动条距离 DOM方法:

document.body.scrollTop             //chrome
document.documentElement.scrollTop   //其它浏览器

于是对与所有浏览器都兼容的办法就是:

var top = document.body.scrollTop || document.documentElement.scrollTop

获取滚动条距离 BOM方法: (高版本浏览器兼容)

window.pageXOffset          //横向滚动条
window.pageYOffset          //纵向滚动条

设置滚动条距离

window.scrollTo(x,y)

参数:
x:横向距离
y:纵向距离
这两个参数必须同时出现

3.内容高度

内容高度是指被元素撑开的内容

scrollHeight

语法:

元素.scrollHeight           //取元素被撑开的高度,如果没有被撑开,那么就去父级的高度  
body.scrollHeight           //有兼容性问题。chrome下取到的是可视区域的高度,FF下获取到的是内容区域的高度  

要获取body的实际宽高,一般使用:

document.body.offsetWidth
document.body.offsetHeight

4 onscroll,onresize

onscroll

window.onscroll

作用:
当滚动条滚动的时候出发函数

onresize

window.onresize

作用:
当窗口有改变的时候触发函数。

窗口的改变频率由浏览器自身决定

你可能感兴趣的:(常用的BOM方法)