如何获取具有绝对定位的元素的绝对坐标（JavaScript，浏览器）

Question

我在获取某个绝对定位元素的中心坐标时遇到了问题，该元素是另一个绝对定位元素的子元素。 您可以在此处查看元素顺序的屏幕截图。

为了更好地理解问题，您可以访问我的GitHub存储库。 index.html文件位于“/ Resources”文件夹中。

所以，我有一些可拖动的窗口（使用interact.js），这些窗口在其他可拖动的窗口中，我想通过线条-divs将它们的中心连接起来（使用带有一些变换的div绘制）。

我使用此方法来渲染线条（也许这里存在一些问题）。 我曾尝试使用jsPlumb进行线条绘制，但失败了 :(

这里是获取x和y点的方法。

// bottom right        
var x1 = offset1.left - margin1.left + size1.width/2 - (this.dom.getAttribute('data-x') || 0);
var y1 = offset1.top - margin1.top + size1.height/2 - (this.dom.getAttribute('data-y') || 0);
// top right
var x2 = offset2.left - margin2.left + size2.width/2 - (this.dom.getAttribute('data-x') || 0);
var y2 = offset2.top - margin2.top + size2.height/2 - (this.dom.getAttribute('data-y') || 0);

（this.dom.getAttribute('data-x') || 0）- 这是用于Interact.js的。

function getMargins(elem) {
    var top = 0, left = 0;
    while (elem.parentNode) {
        top = top + parseFloat(window.getComputedStyle(elem).marginTop.replace('px', ''));
        left = left + parseFloat(window.getComputedStyle(elem).marginLeft.replace('px', ''));
        elem = elem.parentNode;
    }

    return { top: Math.round(top), left: Math.round(left) }
}

function getOffsetRect(elem) {
    // (1)
    var box = elem.getBoundingClientRect()

    // (2)
    var body = document.body
    var docElem = document.documentElement

    // (3)
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    // (4)
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    // (5)
    var top = box.top + scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}

你能帮我获取中心坐标吗？提前感谢。

- Lev Balagurov

Answer 1

试试这个... 效果最好

 function getPos(el) {
     var rect=el.getBoundingClientRect();
     return {x:rect.left,y:rect.top};
 }

像这样使用：

 var coords = getPos(document.querySelector("el"));
 alert(coords.x);alert(coords.y);

- Sayan J. Das

---

你救了我的命。 - Seungwon

没问题！！很高兴知道我能帮到你。 - Sayan J. Das

Answer 2

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

var x = getOffset(document.getElementById("MyID")).left;
var y = getOffset(document.getElementById("MyID")).top;

console.log(x, y);

- Gustavo Lisi

Answer 3

使用jQuery的offset()函数。它会给出元素的上下左右位置。
返回的上下左右位置是相对于文档而不是窗口的。
如果你想要相对于窗口的位置，可以从这些值中减去窗口的scrollTop和scrollLeft值，像这样：

var offset = $("selector").offset();
var posY = offset.top - $(window).scrollTop();
var posX = offset.left - $(window).scrollLeft();

- Khalil Laleh

---

是的，它可以工作，但不是很好... 而且它绝对不适合最上面。 - Lev Balagurov

@LevBalagurov，我编辑了答案，请再看一下。窗口可能有滚动条，你选错了顶部。 - Khalil Laleh

但是窗口没有滚动条。截图 我认为标准的偏移方法在这里不起作用。也许我们应该使用样式参数：top，left。 - Lev Balagurov

但现在我知道如何处理X轴了：var x1 = offset1.left - margin1.left - parseInt(window.getComputedStyle(Field).paddingLeft.replace('px','')) + size1.width/2 - (this.dom.getAttribute('data-x') || 0); - Lev Balagurov

Answer 4

这里是更准确的方法

我也曾经遇到过类似你面临的问题...

这里提供了纯JavaScript解决方案。 试试这个吧。

  var top = 0,
    left = 0,
    width = 0,
    height = 0;
  let bound = element.getBoundingClientRect();
  height = bound.height;
  width = bound.width;
  do {
    bound = element.getBoundingClientRect();
    top += bound.top;
    left += bound.left;
    element = element.offsetParent;
    if (element !== null) {
      bound = element.getBoundingClientRect();
      top -= bound.top - window.scrollY;
      left -= bound.left - window.scrollX;
    }
  } while (element);
  
  return {
    top: top,
    left: left,
    width: width,
    height: height
  };
};

然后，通过调用函数，您可以获取元素相对于整个文档的坐标。

left = obj.left;
right = obj.right;
width = obj.width;
height = obj.height;

该方法计算包括填充、边距、边框和滚动偏移在内的坐标。

如果您有可拖动的对象，则可以使用 event.pageX / Y 找到其位置。

- Vishnuxx