怎樣使用JS取得DOM 元素絕對位置

這次帶給大家怎樣使用JS取得DOM元素絕對位置，使用JS取得DOM元素絕對位置的注意事項有哪些，以下就是實戰案例，一起來看一下。

在操作頁面滾動和動畫時經常會獲取DOM 元素的絕對位置，例如本文左側的懸浮導航，當頁面滾動到它以前會正常地渲染到文檔流中，當頁面滾動超過了它的位置，就會永遠懸浮在左側。

本文會詳述各種取得 DOM 元素絕對位置 的方法以及對應的兼容性。關於如何取得 DOM 元素高度和滾動高度，請參考視口的寬高與滾動高度 一文。

概述

這些是本文涉及的API 對應的文檔和標準，供查閱：

##offsetTop相對定位容器的位置MDNCSSOM View ModuleclientTop上邊框寬度MDNCSSOM View Module.getBoundingClientRect()元素大小與相對視窗的位置 MDNCSSOM View Module.getClientRects()所有子CSS 盒子的大小和位置#MDNCSSOM View Module.getComputedStyle()套用所有樣式表和計算之後的CSS 屬性MDNDOM Level 2 Style CSSOM

offsetTop/offsetLeft

HTMLElement.offsetTop 用來取得目前元素（不包含上方邊框）相對於定位容器（positioning container）的位置。也就是說，

如果所有祖先元素都是靜態定位position:static;（這是預設的情況），offsetTop 表示與文件最上方的高度差（文檔最上方可能已經滾出視口，這個高度可能大於視口高度）。

如果存在絕對定位的祖先元素 position:absolute/fixed，offsetTop 就會相對於這個元素。因此為了取得相對於文件最上方的高度差，需要遞歸地呼叫：

function getOffsetTop(el){
 return el.offsetParent
  ? el.offsetTop + getOffsetTop(el.offsetParent)
  : el.offsetTop
}

el.offsetParent 是目前元素的定位容器（positioning container），如果目前元素沒有絕對定位的祖先節點，這個屬性的值就是null。

相容性與限制：幾乎所有瀏覽器都支援該屬性。如果元素被隱藏它的值就是 0，但在 IE9 下沒有影響。

clientTop/clientLeft

#不要被名字誤導，Element.clientTop 是指當前元素的上邊框的寬度的整數值。總是等於 getComputedStyle() 傳回的 border-top-width 屬性的四捨五入為整數後的值。

為什麼呢？在 DOM 術語中，client 總是指除邊框（border）外的渲染盒子（內邊距 內容大小）。 offset 總是指包含邊框的渲染盒子（邊框 內邊距 內容大小），clientTop 即為這兩者的 Top 之差，即邊框寬度。盒子的概念請參考：CSS Display 屬性與盒子模型

相容性與限制：同offsetTop/offsetLeft

.getBoundingClientRect()

#Element.getBoundingClientRect() 用來取得元素的大小，以及相對於視窗（viewport）的位置，傳回一個DOMRect 物件。

> document.querySelector('span').getBoundingClientRect()
DOMRect {x: 2.890625, y: 218.890625, width: 1264, height: 110, top: 218.890625, …}
bottom: 328.890625
height: 110
left: 2.890625
right: 1266.890625
top: 218.890625
width: 1264
x: 2.890625
y: 218.890625

如果要取得相對於文件左上角的位置，需要在上述 top 和 left 的基礎上再加滾動位置。如下程式碼來自MDN，可相容幾乎所有瀏覽器：

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

相容性與限制：同樣是CSSOM View Module 的特性，但幾乎相容於所有瀏覽器，可參考

# https://caniuse.com/#feat=getboundingclientrectIE 下視窗的左上角可能不是0,0，在IE9 可以這樣把它設定為0,0：

<meta http-equiv="x-ua-compatible" content="ie=edge"/>

.getClientRects()

Element.getClientRects() 用來取得DOM 元素中的所有CSS 盒子模型對應的DOMRect 組成的集合。

如果是一個區塊級元素，在傳回的集合中應該只有一個元素，也就是這個區塊的大小和位置。但如果是一個行內元素（或 SVG 內的元素），則會傳回其中每個 CSS 盒子。例如一個普通的被預設折行的<span>：

> document.querySelector('span').getClientRects()
DOMRectList {0: DOMRect, 1: DOMRect, 2: DOMRect, length: 5}
0: DOMRect {x: 2.890625, y: 262.890625, width: 1264, height: 22, top: 262.890625, …}
1: DOMRect {x: 2.890625, y: 284.890625, width: 1264, height: 22, top: 284.890625, …}
2: DOMRect {x: 2.890625, y: 306.890625, width: 768, height: 22, top: 306.890625, …}

這個<span> 有三行，其中第三行的長度不足一行，每次折行都形成了一個新的CSS 盒子。

相容性與限制：在IE8 及以下會回傳IE 獨有的TextRectangle 物件（而不是ClientRect），這個物件不具有width 和height 屬性，而且無法為它設定屬性。參考：https://webplatform.github.io/docs/dom/HTMLElement/getClientRects/

.getComputedStyle()

Window. getComputedStyle() 可以得到一個元素的所有計算後的CSS 屬性。對於簡單的絕對定位元素，可以透過這個 API 傳回的 top，left 等屬性值來取得元素的位置。例如：

let btn = document.querySelector('#btn-scroll-up')
let {top, left} = getComputedStyle(btn)
console.log('top:', top, 'left:', left)

.getComputedStyle() 還有一個有用的用法，取得偽元素的大小和位置等樣式資訊：

// 以下代码来自： https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
var h3 = document.querySelector('h3'); 
var result = getComputedStyle(h3, ':after').content;
console.log('the generated content is: ', result); // returns ' rocks!'

兼容性和限制：.getComputedStyle() 几乎兼容所有浏览器，可参考 https://caniuse.com/#search=getComputedStyle。但它返回的值是 CSS 属性，用它获取绝对位置时要注意值的类型。例如 left 可能是 13px 这样的绝对值，也可能是 auto 这样的 CSS 关键字。

总结 获取 DOM 元素相对于文档的位置，可以直接使用 offsetTop； 获取 DOM 元素相对于视口的位置，可以使用 .getBoundingClientRect()； 获取 SVG 元素或行内元素的 CSS 盒子（比如用来做文本高亮时），可以使用 .getClientRects()； 获取绝对定位元素、伪元素的渲染后 CSS 属性，可以使用 .getComputedStyle()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用react配合antd组件实现管理系统

js图片转base64方法总结

API	用途	文件	標準

以上是怎樣使用JS取得DOM 元素絕對位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！