.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.
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.
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
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
// 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),