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

【问题标题】：How to get absolute coordinates of element with absolute position (JavaScript, Browser)如何获取具有绝对位置的元素的绝对坐标（JavaScript，浏览器）
【发布时间】：2021-05-28 05:36:22
【问题描述】：

我在获取元素中心的坐标时遇到了一些问题，该中心也是具有绝对位置的其他元素的子元素。 Here you can see a screenshot with the order of elements.

为了更好地理解问题，您可以访问我的repository at GitHub. index.html 在文件夹“/Resources”中

所以，我在其他一些可拖动窗口中有一些可拖动窗口（带有interact.js），我想通过lines-div 连接它们的中心（它们是使用带有一些转换的div 绘制的）。

我使用this method 来渲染线条（可能这里有一些问题）。我曾尝试使用 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) }
}

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

【问题讨论】：

标签： javascript html position interact.js

【解决方案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);

【讨论】：

你救了我的命
没问题！！很高兴知道我提供了帮助。

【解决方案2】：

使用 jQuery offset() 函数。它为您提供元素的顶部和左侧。
返回顶部和左侧是文档而不是窗口内的位置。
如果您想要窗口内的位置，请从这些值中减去窗口的 scrollTop 和 scrollLeft，如下所示：

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

【讨论】：

是的，它有效，但是not very well.. 它是absolutely wrong for the top
@LevBalagurov ，我编辑了答案，再看看。窗口可能有滚动条，而您的顶部有误
但是窗口没有滚动条。 Screenshot 我认为带偏移量的标准方法在这里行不通。也许我们应该使用样式的参数：top, left
但现在我要如何处理 X 轴：var x1 = offset1.left - margin1.left - parseInt(window.getComputedStyle(Field).paddingLeft.replace('px','')) + size1.width/2 - (this.dom.getAttribute('data-x') || 0);

【解决方案3】：

这里是更准确的方法

我也遇到过和你一样的问题...

这是纯 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;

该方法计算坐标包括padding、margin、border和scroll offset..

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

【讨论】：