如何取得前端介面中的DOM元素絕對位置

這次帶給大家怎麼取得前端介面中的DOM元素絕對位置，怎麼取得前端介面中的DOM元素絕對位置的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

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

概述

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

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：

#.getClientRects()

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

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

> 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, …}

這個有三行，其中第三行的長度不足一行，每次折行都形成了一個新的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中文網其它相關文章！

推薦閱讀：

JS的try-catch語句與錯誤類型使用

##如何操作將設定資料從程式碼中分離

以上是如何取得前端介面中的DOM元素絕對位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！