DOM:clientXXX, offsetXXX, offset

DOM对象提供了一系列属性让我们快速的获取dom元素的某些属性，一开始接触到clientHeight,offsetHeight,scrollHeight很容易混淆这几个系列的属性，今天好好梳理一遍：

一. clientXXX系列

1.clientHeight: 元素可见区高度，等于内容高度加上下padding,对应上图360 = 300 + 30 + 30（和内容是否溢出没有任何关系）

2.clientWidth: 元素可见区宽度, 等于内容高度加左右padding,对应上图360 = 300 + 30 + 30（和内容是否溢出没有任何关系）

3.clientLeft: 元素左边框宽度 10

4.clientTop: 元素上边框宽度 10

二. offsetXXX系列

offsetParent：是当前dom元素的父级参照物

1.offsetHeight: 等于clientHeight加上下边框宽度 360 + 10 + 10（和内容是否溢出没有任何关系）

2.offsetWidth: 等于clientWidth加左右边框宽度 360 + 10 + 10（和内容是否溢出没有任何关系）

3.offsetLeft: 这个值和offsetParent息息相关，表示当前元素左外边框距离父级参照物左内边框的位移距离(距离offsetParent的偏移距离)

4.offsetTop: 这个值和offsetParent息息相关，表示当前元素上外边框距离父级参照物上内边框的位移距离(距离offsetParent的偏移距离)

三. scrollXXX系列

1.scrollHeight: 等于clientHeight，前提是内容没有溢出，如果内容溢出了，它的值就等于实际内容高度加上paddingTop

2.scrollWidth: 等于clientWidth， 前提是内容没有溢出，如果内容溢出了，它的值就等于实际内容宽度加上paddingLeft

以上2个值获取的值都是约等于的值：假如设置了overflow:hidden，获取到的值又变化了，并且在不同的浏览器中获取到的值都是不一样的

3.scrollLeft: 横向滚动条卷去的宽度

4.scrollTop: 纵向滚动条卷的高度

最后封装一个获取元素offset距离body的方法:

functiongetOffset(el) {

varoffsetX=0,//左偏移

offsetY=0,//右偏移

parent;//父级参照物

offsetX+=el.offsetLeft;

offsetY+=el.offsetTop;

parent=el.offsetParent;

// 直到parent是body

while(parent) {

//在ie8中，offetLeft/offsetTop的值是当前元素的外边框到到父级参照物的外边框，就是说offsetLeft/offsetTop的值是已经包含边框的宽度了

if( window.navigator.userAgent.toLocaleLowerCase.indexOf('msie 8.0')===-1){

offsetX+=parent.clientLeft;

offsetY=parent.clientTop;

}

offsetX+=parent.offsetLeft;//clientLeft是父级参照物的左边框宽度

offsetY+=parent.offsetTop;

parent=parent.offsetParent;

}

return{

offsetX:offsetX,

offsetY:offsetY

}

}