如何获得具有绝对位置的元素的绝对坐标(JavaScript,浏览器)

Question

我也有一些问题,即获取元素中心的坐标也是绝对位置的其他元素的子元素. 在这里,您可以看到包含元素顺序的屏幕截图.

为了更好地理解这个问题,您可以访问GitHub上的我的存储库.index.html位于"/ Resources"文件夹中

所以,我在其他一些可拖动的窗口中有一些可拖动的窗口(带有interact.js),我想通过line-div连接它们的中心(它们是使用带有一些转换的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) }
}

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

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);

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);

Answer 3

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

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