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

Question

I have some problems with getting coordinates of an element's center which is child of other element with absolute position too. Here you can see a screenshot with the order of elements.

To understand the problem better you can visit my repository at GitHub. index.html is in folder "/Resources"

So, I have some draggable windows (with interact.js) in some other draggable windows and I want to connect their centers by the lines-divs (they are drawn using div with some transformations).

I use this method to render the lines (maybe there are some problems here). I have tried to use jsPlumb for lines drawing, but I failed :(

There is getting points x and 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) - that's for 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) }
}

Can you help me with the getting center coordinates? Thanks in advance

Answer 1

Try this.. Works best

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

Use it like this:

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

Answer 2

Use jQuery offset() function. It gives you top and left of the element.
The return top and left are position inside document not window.
If you want the position inside window, subtract scrollTop and scrollLeft of window from those values like this:

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

Answer 3

Here is the more accurate method

I had also experienced similar issue like you are facing...

Here is the pure javascript solution . Try this

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

Then you get your element's coordinates relative to the whole document by calling

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

This method calculates the coordinates including padding , margin , border and scroll offset..

if you have draggable object then find its position using event.pageX / Y

Answer 4

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