資訊專欄INFORMATION COLUMN
摘要：整理獲取和尺寸和位置方法更多前端技術和知識點，搜索訂閱號菌訂閱視口頁面或窗口的位置和寬高獲取視口寬高下面方法是包括滾動條的寬高，不支持滾動條另外瀏覽器兼容差，可獲取包括工具欄的寬高頁面滾動位置返回整個頁面的滾動的位置，與返回的值一致，前者是
整理獲取 viewport 和 element 尺寸和位置方法
?? 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱視口頁面或窗口的位置和寬高 獲取視口寬高
下面方法是包括滾動條的寬高，不支持 IE8
window.innerWidth window.innerHeight
width + padding + border + 滾動條 另外 outerWidth 瀏覽器兼容差，可獲取包括工具欄的寬高頁面滾動位置
返回整個頁面的滾動的位置，pageYOffset/pageXOffset 與 scrollY/scrollX 返回的值一致，前者是后者的別名，建議使用前者，不支持 IE8
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft窗口在顯示器的位置
標準瀏覽器使用的是 screenX/screenY，IE 中使用的是 screenLeft/screenTop
window.screenLeft || window.screenX window.screenTop || window.screenY元素幾何尺寸和位置 元素占用的空間尺寸和位置
getBoundingClientRect
使用方法 getBoundingClientRect() 返回的值見下圖：
IE 只返回 top right bottom left 四個值，如果需要 width height 則需要計算：
function getBoundingClientRect(elem) {
let rect = elem.getBoundingClientRect()
return {
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
width: rect.width || rect.right - rect.left,
height: rect.height || rect.bottom - rect.top
}
}
clientWidth/clientHeight
返回元素不含滾動條的尺寸，不包括邊框
document.documentElement.clientWidth || document.body.clientWidth document.documentElement.clientHeight || document.body.clientHeight
如果是 document.documentElement，那么返回的是不包含滾動條的視口尺寸
如果是 document.body，并且是在混雜模式下，那么返回的是不包含滾動條的視口尺寸
clientLeft/clientTop
返回的是計算后的 CSS 樣式的 border-left-width/border-top-width 的值，就是邊框的寬度
offsetWidth/offsetHeight
同樣可以使用 offsetWidth/offsetHeight 來獲取元素包括滾動條和邊框的尺寸，這個方法返回元素本身的寬高 + padding + border + 滾動條
offsetLeft/offsetTop
相對于最近的祖先定位元素（CSS position 屬性被設置為 relative、absolute 或 fixed 的元素）的左右偏移值
offsetLeft/offsetTop 返回元素 X Y 坐標值
計算元素的位置：
function getElementPosition(e) {
var x = 0, y = 0;
while (e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent; // 獲取最近的祖先定位元素
}
return {
x: x,
y: y
};
}
元素內容的寬高和滾動距離
scrollWidth/scrollHeight
這個方法返回元素內容區域的寬高 + padding + 溢出內容尺寸
document.documentElement.scrollWidth || document.body.scrollWidth document.documentElement.scrollHeight || document.body.scrollHeight
如果元素是 document.documentElement，返回的是視口滾動區域寬度和視口寬度中較大的那個
如果元素是 document.body，并且是在混雜模式下，那么返回的是視口滾動區域寬度和視口寬度中較大的那個
scrollLeft/scrollTop
這個方法返回元素滾動條的位置
如果元素是根元素，那么返回 window.scrollY 的值
如果元素是 body，并且在混雜模式下，那么返回的是 window.scrollY 的值
因此可用于處理頁面滾動的距離的兼容
請關注我的訂閱號，不定期推送有關 JS 的技術文章，只談技術不談八卦
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103494.html
摘要：元素的尺寸和位置元素的尺寸包括內容區寬高不包括如果元素的是那么此時設置的就是該元素的也就是等于內容區的寬高滾動條。元素的位置使用我們可以得到元素相對于的位置。還有一種方法可以得到元素相對于最近定位的祖先元素的位置，就是使用和屬性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括內容區寬/高,padding,border,不...
摘要：元素的尺寸和位置元素的尺寸包括內容區寬高不包括如果元素的是那么此時設置的就是該元素的也就是等于內容區的寬高滾動條。元素的位置使用我們可以得到元素相對于的位置。還有一種方法可以得到元素相對于最近定位的祖先元素的位置，就是使用和屬性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括內容區寬/高,padding,border,不...
摘要：元素的尺寸和位置元素的尺寸包括內容區寬高不包括如果元素的是那么此時設置的就是該元素的也就是等于內容區的寬高滾動條。元素的位置使用我們可以得到元素相對于的位置。還有一種方法可以得到元素相對于最近定位的祖先元素的位置，就是使用和屬性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括內容區寬/高,padding,border,不...
閱讀 3627·2023-04-26 02:32
閱讀 3904·2021-11-23 10:05
閱讀 2291·2021-10-08 10:04
閱讀 2711·2021-09-22 16:06
閱讀 3612·2021-09-22 15:27
閱讀 764·2019-08-30 15:54
閱讀 1698·2019-08-30 13:50
閱讀 2704·2019-08-29 13:56
