> 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()
总结
以上所述是小编给大家介绍的JS中获取 DOM 元素的绝对位置实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: