检索 HTML 元素的位置(X,Y)

我想知道如何获取 JavaScript 中imgdiv等 HTML 元素的 X 和 Y 位置。

答案

正确的方法是使用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>');

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

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;

这为我工作(从最高投票答案修改):

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

使用这个我们可以打电话

getOffset(element).left

要么

getOffset(element).top

如果你想完成它只是在 JavaScript 中 ,这里有一些一个衬垫使用getBoundingClientRect()

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

第一行将返回offsetLeft表示相对于文档的 X。

第二行将返回offsetTop相对于文档说 Y。

getBoundingClientRect()是一个 javascript 函数,它返回元素相对于窗口视口的位置。

大多数浏览器上的 HTML 元素将具有:

offsetLeft
offsetTop

这些参数指定元素相对于其具有布局的最近父元素的位置。通常可以通过 offsetParent 属性访问此父级。

IE 和 FF3 有

clientLeft
clientTop

这些属性不太常见,它们在其父级客户区中指定元素位置(填充区是客户区的一部分,而边界和边距则不是)。

如果页面包含 - 至少 - 任何 “DIV”,则由 meouw 给出的函数会抛出 “Y” 值超出当前页面限制。为了找到确切的位置,您需要同时处理 offsetParent 和 parentNode。

尝试下面给出的代码(已检查 FF2):

var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

您可以在Element.prototype添加两个属性,以获取任何元素的顶部 / 左侧。

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

这样称呼:

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

这是一个比较结果与 jQuery 的offset().top.lefthttp : //jsfiddle.net/ThinkingStiff/3G7EZ/

在不使用递归功能的情况下,有效地检索相对于页面的位置:(还包括 IE)

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

这样的事情怎么样,通过传递元素的 ID 并返回左或上,我们也可以将它们组合起来:

1)找到左

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2)找到顶部

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

3)一起找到左和上

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

使用 JavaScript 框架可能会更好地为您提供服务,该框架具有以与浏览器无关的方式返回此类信息(甚至更多!)的功能。这里有一些:

使用这些框架,您可以执行以下操作: $('id-of-img').top获取图像的 y 像素坐标。