在操作頁面滾動和動畫時經常會獲取DOM 元素的絕對位置，例如本文左側的懸浮導航，當頁面滾動到它以前會正常地渲染到文檔流中，當頁面滾動超過了它的位置，就會永遠懸浮在左側。
| API |
用途 |
文件 |
標準 |
##offsetTop | 相對定位容器的位置 | MDN | CSSOM View Module |
clientTop | 上邊框寬度 | MDN | CSSOM View Module |
.getBoundingClientRect() | 元素大小與相對視窗的位置 | MDN | CSSOM View Module |
.getClientRects() | 所有子CSS 盒子的大小和位置 | #MDN | CSSOM View Module |
.getComputedStyle() | 套用所有樣式表和計算之後的CSS 屬性 | MDN | DOM 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中文網其它相關文章！
推薦閱讀：
JS的try-catch語句與錯誤類型使用
##如何操作將設定資料從程式碼中分離
