在操纵页面滚动和动画时经常会获取 DOM 元素的绝对位置，例如 本文 左侧的悬浮导航，当页面滚动到它以前会正常地衬着到文档流中，当页面滚动赶过了它的位置，就会始终悬浮在左侧。

本文会详述各类获取 DOM 元素绝对位置 的要领以及对应的兼容性。关于如何获取 DOM 元素高度和滚动高度，请参考视口的宽高与滚动高度 一文。

概述

这些是本文涉及的 API 对应的文档和标准，供查阅：

API用途文档标准
offsetTop   相对定位容器的位置   MDN    
clientTop   上边框宽度   MDN    
.getBoundingClientRect()   元素巨细和相对视口的位置   MDN    
.getClientRects()   所有子 CSS 盒子的巨细和位置   MDN    
.getComputedStyle()   应用所有样式表和计算之后的 CSS 属性   MDN      

offsetTop/offsetLeft

HTMLElement.offsetTop 用来获取当前元素（不包孕上边框）相对付定位容器（positioning container）的位置。也就是说，

如果所有祖先元素都是静态定位 position:static;（这是默认的情况），offsetTop 暗示与文档最上方的高度差（文档最上方可能已经滚出视口，这个高度可能大于视口高度）。

如果存在绝对定位的祖先元素 position:absolute/fixed，offsetTop 就会相对付这个元素。因此为了获取相对付文档最上方的高度差，需要递归地挪用：

1

2

3

4

5

 

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 东西。

1

2

3

4

5

6

7

8

9

10

 

> 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，可兼容几乎所有浏览器：

1

2

3

4

5

6

 

// 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 的特性，但几乎兼容所有浏览器，可参考

 下窗口的左上角可能不是 0,0，在 IE9 可以这样把它设置为 0,0：

1

 

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

 

.getClientRects()

Element.getClientRects() 用来获得 DOM 元素中的所有CSS 盒模型 对应的 DOMRect 构成的调集。