页面宽高，窗口宽高，元素宽高，元素位置，页面滚动距离

注：以下内容只适用于chrome

页面宽高:

document.body.clientWidth/Height（不包括margin）

document.body.offsetWidth/Height（不包括margin）

document.body.scrollWidth/Height（包括margin）

tips:

1.如果不是最大化浏览器窗口，且在body标签设置min-width，document.body.offsetWidth会比document.body.clientWidth多出2px，那就是滚动条旁边的2px空白空间。

2.有时候，没设置overflow:hidden;图片会撑出页面宽度。从而，你认为有横向滚动条的页面宽度数值不准。

窗口viewport宽高：

window.innerWidth/Height（带滚动条）

document.documentElement.clientWidth/Height（不带滚动条）

元素宽高：

element.offsetWidth/Height(width+padding+border)

element.scrollWidth/Height(width+padding，没加border)

元素位置：

element.offsetTop/Left(相对于父元素offsetParent对象) 

通过递归父元素，获取父元素的offsetTop/Left即可获取元素相对于页面的位置

function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualTop;
　　}

另一种方法，

使用getBoundingClientRect()方法获取元素相对于窗口的距离，返回的是left、right、top、bottom,width和height

var X= this.getBoundingClientRect().left+document.body.scrollLeft;

var Y =this.getBoundingClientRect().top+document.body.scrollTop;

页面滚动距离：

window.pageXOffset/window.pageYOffset

document.body.scrollTop/document.body.scrollLeft

 

参考链接：

http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html

http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

http://blog.jobbole.com/44319/