How to get absolute coordinates of element with absolute position (JavaScript, Browser)

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

score 17 · Answer 1 · answered Nov 26 '16 at 03:58

17

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

answered Nov 26 '16 at 03:58

Sayan J. Das

852
10
19

you saved my life – Seungwon Nov 22 '17 at 06:03
No problem!! Glad to know I helped. – Sayan J. Das Jun 08 '18 at 05:12

Khalil Laleh · Answer 2 · 2016-06-22T21:30:40.620

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

edited Jun 22 '16 at 21:30

answered Jun 22 '16 at 18:35

Khalil Laleh

1,168
10
19

Yeah, it works, but [not very well..](https://yadi.sk/i/V_6lhY7Jsijpa) And it is [absolutely wrong for the top](https://yadi.sk/i/SgESso8AsikGm) – Lev Balagurov Jun 22 '16 at 18:55
@LevBalagurov , I edited the answer, take a look again. The window may have the scroll and you got the wrong top – Khalil Laleh Jun 22 '16 at 21:32
But the window haven't got the scroll. [Screenshot](https://yadi.sk/i/fjtDMhwFsj64A) I think that the standard method with offset will not work here. Maybe we should use style's parameters: top, left – Lev Balagurov Jun 23 '16 at 05:40
But now I now what to do with the axis 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 Jun 23 '16 at 05:48

score 2 · Answer 3 · answered Jun 24 '22 at 15:26

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

score 0 · Answer 4 · answered May 27 '21 at 21:36

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

How to get absolute coordinates of element with absolute position (JavaScript, Browser)

4 Answers4