JS中获取DOM元素的绝对位置实例详解
在操作页⾯滚动和动画时经常会获取 DOM 元素的绝对位置，例如本⽂左侧的悬浮导航，当页⾯滚动到它以前会正常地渲染到⽂档流中，当页⾯滚动超过了它的位置，就会始终悬浮在左侧。
本⽂会详述各种获取 DOM 元素绝对位置的⽅法以及对应的兼容性。关于如何获取 DOM 元素⾼度和滚动⾼度，请参考视⼝的宽⾼与滚动⾼度⼀⽂。
概述
这些是本⽂涉及的 API 对应的⽂档和标准，供查阅：
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()
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
svg实例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 的特性，但⼏乎兼容所有浏览器，可参考
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
.getClientRects()
如果是⼀个块级元素，返回的集合中应该只有⼀个元素，即这个块的⼤⼩和位置。但如果是⼀个⾏内元素（或者 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 盒⼦。
.getComputedStyle()
let btn = document.querySelector('#btn-scroll-up')
let {top, left} = getComputedStyle(btn)
console.log('top:', top, 'left:', left)
.getComputedStyle()还有⼀个有⽤的⽤法，获取伪元素的⼤⼩和位置等样式信息：
// 以下代码来⾃： /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!'
总结获取 DOM 元素相对于⽂档的位置，可以直接使⽤offsetTop；获取 DOM 元素相对于视⼝的位置，可以使⽤
.getBoundingClientRect()；获取 SVG 元素或⾏内元素的 CSS 盒⼦（⽐如⽤来做⽂本⾼亮时），可以使⽤.getClientRects()；获取绝对定位元素、伪元素的渲染后 CSS 属性，可以使⽤.getComputedStyle()
总结
以上所述是⼩编给⼤家介绍的JS中获取 DOM 元素的绝对位置实例详解，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论