DOM中獲取元素尺寸和位置常用的API
阿新 • • 發佈：2018-09-20
scrolltop border order bottom borde 尺寸 常用 瀏覽器 cli
scrollWidth: 獲取的寬度為（內容實際寬度包括卷入的區域+padding部分）與（元素寬度+padding部分）
scrollHeight: 獲取的寬度為（內容實際高度包括卷入的區域+padding部分）與（元素高度+padding部分）
window.scrollBy(x,y): 窗口相對滾動函數
window.scrollTo(x,y): 窗口絕對滾動函數
client系列
clientTop: 獲取元素border-top的寬度
clientLeft:獲取元素border-left的寬度
clientWidth: 獲取元素的寬度，不包含border
clientHeight:獲取元素的高度，不包含border
getBoundingClientRect(): 獲取與元素尺寸信息有關的對象， 記住這個API，特別好用！！！ 配合window.innerHeight，onscroll可以方便的實現lazy load
+ top bottom: 獲取元素上下邊(不考慮margin)到瀏覽器窗口上邊的距離數值
+ left right: 獲取元素左右邊(不考慮margin)到瀏覽器窗口左邊的距離數值
+ width height: 元素的寬度和高度(包含border)
+ x y : 或元素左頂點到窗口左邊和上邊的距離(不考慮margin) 這個屬性兼容性不好，不用
offset系列
offsetParent:獲取元素的最近position不是static的祖先元素
offsetLeft: 獲取元素（包含border）相對於最近position不是static的祖先元素的左邊距離（不包含border，包含padding）
offsetTop: 獲取元素（包含border）相對於最近position不是static的祖先元素的上邊距離（不包含border，包含padding）
offsetWidth: 獲取元素的寬度，包含border
offsetHeight: 後去元素的高度，包含border
scroll系列
scrollLeft: 獲取左側卷入不可見區域的寬度
scrollTop:
scrollWidth: 獲取的寬度為（內容實際寬度包括卷入的區域+padding部分）與（元素寬度+padding部分）
scrollHeight: 獲取的寬度為（內容實際高度包括卷入的區域+padding部分）與（元素高度+padding部分）
window.scrollBy(x,y): 窗口相對滾動函數
window.scrollTo(x,y): 窗口絕對滾動函數
DOM中獲取元素尺寸和位置常用的API