DOM對象提供了一系列屬性讓我們快速的獲取dom元素的某些屬性，一開始接觸到clientHeight,offsetHeight,scrollHeight很容易混淆這幾個系列的屬性，今天好好梳理一遍：
一. clientXXX系列
1.clientHeight: 元素可見區(qū)高度，等于內(nèi)容高度加上下padding,對應(yīng)上圖360 = 300 + 30 + 30（和內(nèi)容是否溢出沒有任何關(guān)系）
2.clientWidth: 元素可見區(qū)寬度, 等于內(nèi)容高度加左右padding,對應(yīng)上圖360 = 300 + 30 + 30（和內(nèi)容是否溢出沒有任何關(guān)系）
3.clientLeft: 元素左邊框?qū)挾?10
4.clientTop: 元素上邊框?qū)挾?10
二. offsetXXX系列
offsetParent：是當(dāng)前dom元素的父級參照物
1.offsetHeight: 等于clientHeight加上下邊框?qū)挾?360 + 10 + 10（和內(nèi)容是否溢出沒有任何關(guān)系）
2.offsetWidth: 等于clientWidth加左右邊框?qū)挾?360 + 10 + 10（和內(nèi)容是否溢出沒有任何關(guān)系）
3.offsetLeft: 這個值和offsetParent息息相關(guān)，表示當(dāng)前元素左外邊框距離父級參照物左內(nèi)邊框的位移距離(距離offsetParent的偏移距離)
4.offsetTop: 這個值和offsetParent息息相關(guān)，表示當(dāng)前元素上外邊框距離父級參照物上內(nèi)邊框的位移距離(距離offsetParent的偏移距離)
三. scrollXXX系列
1.scrollHeight: 等于clientHeight，前提是內(nèi)容沒有溢出，如果內(nèi)容溢出了，它的值就等于實際內(nèi)容高度加上paddingTop
2.scrollWidth: 等于clientWidth， 前提是內(nèi)容沒有溢出，如果內(nèi)容溢出了，它的值就等于實際內(nèi)容寬度加上paddingLeft
以上2個值獲取的值都是約等于的值：假如設(shè)置了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的值是當(dāng)前元素的外邊框到到父級參照物的外邊框，就是說offsetLeft/offsetTop的值是已經(jīng)包含邊框的寬度了
if( window.navigator.userAgent.toLocaleLowerCase.indexOf('msie 8.0')===-1){
offsetX+=parent.clientLeft;
offsetY=parent.clientTop;
}
offsetX+=parent.offsetLeft;//clientLeft是父級參照物的左邊框?qū)挾?/p>
offsetY+=parent.offsetTop;
parent=parent.offsetParent;
}
return{
offsetX:offsetX,
offsetY:offsetY
}
}
