1. 首页
  2. 问题
  3. JavaScript检索HTML元素相对于浏览器窗口的位置（X，Y）
小编典典

JavaScript检索HTML元素相对于浏览器窗口的位置（X，Y）

spring

我想知道如何相对于浏览器窗口获取HTML元素（例如img和div在JavaScript中）的X和Y位置。


阅读 1424

收藏
2020-04-23

共2个答案

小编典典

正确的方法是使用element.getBoundingClientRect()：

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer自从你很可能就一直在支持此功能，并且最终在CSSOM Views中对其进行了标准化。所有其他浏览器很早以前就采用了它。

一些浏览器还返回height和width属性，尽管这是非标准的。如果你担心与旧版浏览器的兼容性，请查看此答案的修订版以实现优化的降级实现。

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

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

alert('Element is ' + offset + ' vertical pixels from <body>');
2020-04-23
小编典典

库需要一定的长度才能获得元素的准确偏移量。
这是一个简单的函数，可以在我尝试过的所有情况下都能完成工作。

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;
2020-10-13