js 获取 DOM 元素相对于浏览器窗口的位置

terry 2年前 (2023-09-09) 阅读数 291 #Javascript

只要您可能关心，Internet Explorer 就已经支持此功能，并最终在 CSSOM 视图中标准化了它。很长一段时间以来，所有其他浏览器都采用了它。

某些浏览器还会生成高度和宽度属性，尽管这不是标准的。如果您担心与旧版浏览器的兼容性，请查看此答案的修订版本以获取优化的降级实现。

element.getBoundingClientRect()返回的值是相对于视口的。如果您需要相对于另一个元素的矩形，只需从另一个矩形中减去该矩形即可

例如以下代码：

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：js数组去重，去除相同值下一篇：如何在js中设置非法的日期对象

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

js 获取 DOM 元素相对于浏览器窗口的位置

版权声明

作者文章