1.offset
element.offsetTop 返回元素相對,帶有定位父元素,上方的偏移(如果父元素都沒有定位,則相對body)
element.offsetLeft
element.offsetWidth 返回,元素盒子的width(你給它設(shè)樣式時寫的width)+padding+border-width,的寬度(內(nèi)容是否超出不影響其值)
element.offsetHeight
element.offsetParent 返回你是依照誰返回的上面那些值(如果父元素有定位的,則返回父元素,如果都沒有則返回body)
2.client
element.clientTop 返回元素上邊框大小
element.clientLeft
element.clientWidth 返回,元素盒子的width+padding,不含邊框的 寬度(內(nèi)容是否超出不影響其值)
element.clientHeight
3.scroll
element.scrollTop 返回被卷去的上側(cè)距離
element.scrollLeft
element.scrollWidth 返回,當內(nèi)容沒有超出盒子,則是盒子寬度width+padding,當內(nèi)容超出盒子,則是實際內(nèi)容+padding,不含邊框
element.scrollHeight
4.三個系列寬度做個對比
offset 包含邊框,其余兩個不含
scroll 當內(nèi)容超出時,按照內(nèi)容尺寸算的,其余那兩個都是盒子尺寸
5.各個系列常用點
offset 經(jīng)常用于獲得元素位置: offsetTop
client 經(jīng)常用語獲得盒子大小: clientWidth
scroll 經(jīng)常用于獲取或設(shè)置滾動距離: scrollTop , 和滾動內(nèi)容總高度: scrollHeight
頁面滾動距離 window.pageXOffset