JS中获取DOM元素绝对位置的多种方法详解

获取DOM元素绝对位置的方法概述

在处理页面滚动交互与动画效果时，经常需要获取 DOM 元素的绝对坐标。以本文左侧的悬浮导航为例，当页面未滚动至该区域时，它正常存在于文档流中；一旦页面滚动超过其初始位置，它便会始终固定在左侧显示。

本文将深入探讨获取 DOM 元素绝对位置的各种方法及其浏览器兼容性。关于如何获取 DOM 元素的高度和滚动高度，可参考视口的宽高与滚动高度一文。

概述

以下列出了本文涉及的 API 对应的文档链接与标准规范，供读者查阅：

offsetTop与offsetLeft属性

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属性

clientTop/clientLeft

请勿被名称误导，Element.clientTop 实际上返回的是当前元素上边框宽度的整数值。它始终等于 getComputedStyle() 返回的 border-top-width 属性值四舍五入后的整数。

原因在于，在 DOM 术语中，client 始终指代除边框外的渲染盒子（即内边距加内容大小），而 offset 指代包含边框的渲染盒子（边框加内边距加内容大小）。clientTop 即为这两者在 Top 方向的差值，也就是边框宽度。关于盒子的概念，请参考：CSS Display 属性与盒模型

兼容性与限制：与 offsetTop/offsetLeft 相同。

getBoundingClientRect方法

.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=getboundingclientrect在 IE 浏览器中，窗口的左上角可能并非 0,0，在 IE9 中可通过以下方式将其设置为 0,0：

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

getClientRects方法

.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方法

.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()

总结

总结

以上所述是小编给大家介绍的JS中获取 DOM 元素的绝对位置实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！