js中client-*,scroll-*,offset-*

先来看问题

offsetWidth offsetHeight offsetLeft offsetTop
clientWidth clientHeight clientLeft clientTop
scrollWidth scrollHeight scrollLeft scrollTop

看到上面这些，是不是有点晕乎乎的感觉，下面来说说其中的区别。

offset

offsetWidth & offsetHeight

任何HTML元素的只读属性offsetWidth和offsetHeight以CSS像素返回它的屏幕尺寸，返回的尺寸包括元素的边框和内边距（width/height + border + padding），和滚动条。

offsetLeft & offsetTop

所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标

相对于已定位元素的后代元素和一些其他元素（表格单元），这些属性返回的坐标是相对于祖先元素
一般元素，则是相对于文档，返回的是文档坐标

offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标

1
2
3
4
5
6
7
8
9
10
11
12
13
//用offsetLeft和offsetTop来计算e的位置
function getElementPosition(e){
    var x = 0,y = 0;
    while(e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {
        x : x,
        y : y
    };
}

client

client是一种间接指代，它就是web浏览器客户端，专指它定义的窗口或视口。

clientWidth & clientHeight

clientWidth和clientHeight类似于offsetWidth和offsetHeight，不同的是不包含边框大小（width/height + padding）。同时在有滚动条的情况下，clientWidth和clientHeight在其返回值中也不包含滚动条。

对于<span>等内联元素，总是返回0

clientLeft & clientTop

返回元素的内边距的外边缘和他的边框的外边缘的水平距离和垂直距离，通常这些值就等于左边和上边的边框宽度。

在有滚动条时，并且浏览器将这些滚动条放置在左侧或顶部（反正我是没见过），clientLEft和clientTop就包含这些滚动条的宽度。

scroll

scrollWidth & scrollHeight

这两个属性是元素的内容区域加上内边距，在加上任何溢出内容的尺寸.

因此，如果没有溢出时，这些属性与clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滚动条的位置

scrollLeft和scrollTop都是可写的属性，通过设置它们来让元素中的内容滚动。

document.documentElement和document.body

原来HTML里是document.body –XHTML里是document.documentElement ,都指的是节点(OR元素)
document.body.scrollTop属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常.
而在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;

可采用以下兼容性写法：

1
2
3
4
var top = document .documentElement.scrollTop || document .body.scrollTop; 
//在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。  
var top = document .documentElement.scrollTop ? document .documentElement.scrollTop : document .body.scrollTop; 
//这么写可以得到很好的兼容性。

相反，如果不做声明的话，document.documentElement.scrollTop反而会显示为0。

各个属性：

网页可见区域宽： document .body.clientWidth;
网页可见区域高： document .body.clientHeight;
网页可见区域宽： document .body.offsetWidth (包括边线的宽);
网页可见区域高： document .body.offsetHeight (包括边线的宽);
网页正文全文宽： document .body.scrollWidth;
网页正文全文高： document .body.scrollHeight;
网页被卷去的高： document .body.scrollTop;
网页被卷去的左： document .body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document .documentElement.scrollTop 垂直方向滚动的值
event.clientX+document .documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

参考资料
js中document.documentElement 和document.body 以及其属性
容易混淆client-,scroll-,offset-*