一，offset系列
1,offsetWidth
- 獲取到當(dāng)前元素的寬度（padding+border+width）
- style.width也返回這個(gè)寬度
- 區(qū)別：
- 如果沒有給 HTML 元素指定過 width樣式，或者樣式?jīng)]有寫入標(biāo)簽內(nèi)，則 style.width 返回的是空，如下圖所示。
- style.width返回值除了數(shù)字外還帶有單位px，而offsetWidth返回的數(shù)值類型
image
(根據(jù)數(shù)值計(jì)算也可以知道返回的寬度是元素的width+左右兩個(gè)padding和左右兩個(gè)border)
2，offsetHeight
- 獲取到當(dāng)前的元素的高度（height+padding+border）
- 其他同offsetWidth類似
image
3,offsetLeft
- 獲取元素到最近的定位父盒子的左側(cè)距離，如果沒有就繼續(xù)向上層尋找直到body
- 獲取的距離主要是 父元素的margin+父元素的padding+父元素的border+自己的margin（元素沒有脫離文檔流）
image
- 元素脫離文檔流后，就是元素自身的margin值+left，如圖所示：
image
4，offsetTop
- 獲取元素到最近的定位父盒子的上側(cè)距離，如果沒有就繼續(xù)向上層尋找直到body
- 獲取的距離主要是 父元素的margin+父元素的padding+父元素的border+自己的margin（元素沒有脫離文檔流）
image
- 元素脫離文檔流后只跟自己的margin和top有關(guān)
image
5,offsetParent
- 用于獲取該元素中有定位的最近父級元素
- 如果當(dāng)前元素的父級元素都沒有進(jìn)行定位,那么offsetParent為body
image
image
二，scroll系列
1,scrollHeight
- 獲取元素中內(nèi)容的實(shí)際高度(沒有邊框，有padding),如果沒有內(nèi)容或者內(nèi)容不足，那就獲取到元素的高度
image
image
2，scrollWidth
- 同scrollHeight
- 獲取元素中內(nèi)容的實(shí)際寬度(沒有邊框,有padding)，如果內(nèi)容不足或者沒有內(nèi)容就獲取元素的寬度
3，scrollTop
- 元素向上滾動(dòng)出去的距離
image
4，scrollLeft
- 元素向左滾動(dòng)出去的距離
image
5,兼容問題
- 未聲明 DTD: 谷歌,火狐,IE9+支持：
- document.body.scrollTop/scrollLeft
- 已經(jīng)聲明DTD:IE8以下支持：
- document.documentElement.scrollTop/scrollLeft
- 火狐/谷歌/ie9+以上支持的：
- window.pageYOffest/pageXOffest
- 所以兼容代碼：
function getScroll() {
return {
left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,
top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0
};
}
三、client系列
image
1，clientWidth
- 獲取網(wǎng)頁可視區(qū)域?qū)挾?，不包括滾動(dòng)條，不包括邊框；相當(dāng)于width+padding；
2，clientHeight
- 獲取網(wǎng)頁可視區(qū)域的高度，不包括滾動(dòng)條，不包括邊框；相當(dāng)于height+padding；
3，clientLeft
- 相當(dāng)于左邊邊框的寬度（有滾動(dòng)條會(huì)加上滾動(dòng)條的寬度）
4, clientTop
- 相當(dāng)于上邊框的寬度（有滾動(dòng)條會(huì)加上滾動(dòng)條的寬度）
5，clientX
- 獲取鼠標(biāo)事件發(fā)生時(shí),鼠標(biāo)距離可視區(qū)域的水平坐標(biāo)
6，clientY
- 獲取鼠標(biāo)事件發(fā)生時(shí)，鼠標(biāo)距離可視區(qū)域的垂直坐標(biāo)
image
