# Get element offset in JavaScript

DevFeed: [Get element offset in JavaScript](<https://devfeed.tech/articles/get-element-offset-in-javascript-37298.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/javascript-get-element-offset/>)

Author: Stanko

Published: 2017-07-26T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [bug](<https://devfeed.tech/topics/bug.md>), [iOS](<https://devfeed.tech/topics/ios.md>)

Tags: [bug](<https://devfeed.tech/tags/bug.md>), [ios](<https://devfeed.tech/tags/ios.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

## AI overview

This tutorial explains two ways to calculate a DOM element's document offset in JavaScript: accumulating offsetTop and offsetLeft through the DOM tree, or using getBoundingClientRect together with document scroll. It notes that the approaches differ in CSS transform handling and describes an iOS issue involving position: fixed.

## Source excerpt

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: re