Get element offset in JavaScript

When we left jQuery behind and embraced modern JavaScript frameworks, we thought we would never touch DOM directly again. Well that is not entirely true. There are a lot of cases when you need to get some DOM element size. For element's dimensions .offsetWidth and .offsetHeight are great way to do it.

But one of the other common tasks is getting element's offset, top and left. I'll show you two ways to get those.

Using offsetTop / offsetLeft #

This one is old school, and there is nothing wrong with it. Even today, this method lives in my helpers.js. It is looping to the root of the DOM tree and performance obsessed people may having problem with it. But so far I never had performance issue with it, and I'm talking about production level projects.

One important thing to note - it is not taking CSS transforms into calculations. Everything is calculated from element's original position.

function getElementOffset(el) {
  let top = 0;
  let left = 0;
  let element = el;

  // Loop through the DOM tree
  // and add it's parent's offset to get page offset
  do {
    top += element.offsetTop || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while (element);

  return {
    top,
    left,
  };
}

Using getBoundingClientRect #

Another way is using getBoundingClientRect which is cool because it takes CSS transforms into calculations and it is natively supported. No need to loop through the element's parents. But it's top and left properties are distances from the viewport, not from the document. Because of this, you need to add document scroll to it.

Just note one thing, there is a known bug with iOS and getBoundingClientRect in combination with position: fixed. I found about this bug few days ago when I was working on react-plx. Sometimes it is just returning the wrong values. So, when you have fixed elements, you probably want to fallback to the method above

function getElementOffset(el) {
  const rect = el.getBoundingClientRect();

  return {
    top: rect.top + window.pageYOffset,
    left: rect.left + window.pageXOffset,
  };
}

// If you want to support IE8 and lower
// Use
//
// top: rect.top + (window.pageYOffset || document.documentElement.scrollTop),
// left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft),