What dimensions?

While developing real JavaScript applications, you'll often encounter the need to know the positions and dimensions/sizes of HTML elements i.e their width, their height, their position from top of the viewport or the page and so on.

Just for an example, if you were to write a library for lazy loading images then you would've to calculate the offsets of images from the top of the document to determine exactly when to load them up.

We have a whole course dedicated to teaching lazy loading, in fine detail, at Learn Lazy Loading.

And this is just one example - there are many such simple and complex features in JavaScript that need to know HTML element dimensions. How we get these is what this unit is all about.

In this unit we shall start with understanding the frequently used concepts - offsets and bounding boxes - and see how to get the width and height of an element and its distance from different points such as the viewport or the entire document, using them. After this we'll jump straight into the getComputedStyles() global function and appreciate how it's used to compute any given style for an element.

In short there is much to cover in this unit all of which is highly useful as a JavaScript developer to know!

But before we start, it's quite important that we first go over the limitations we have in getting an element's dimensions using the style property, and thus understand the reason to giving other methods of doing so.

The problem with style

Let's start by imposing a very simple question: can we reliably use the style property on a DOM element to get its absolute width?

In the HTML DOM style property chapter we saw how the style property can be used to set inline styles for a given element; and get the ones that have already been set.

There we also stated that the property can ONLY return an element's inline styles; NOT the ones in a <style> tag or an external stylesheet. If you didn't quite get the idea of what we said just right now let's consider an example.

Suppose we have the following HTML element and want to get its actual width in pixels. We can't at least rely on style to get this job done:

<p>A paragraph</p>
var ele = document.getElementsByTagName("p")[0];
console.log(ele.style.width) // ""

The property returns nothing useful to us; just an empty string. Even if we had specified a custom CSS width for the element anywhere else, except for the style attribute, then also we would get an empty string returned.

It's only in some cases, that we can get some useful output from style as shown below:

<p style="width: 100px;">A paragraph</p>
ele.style.width; // "100px"

Here we've given the element a custom CSS width inside its style attribute, which is then extracted using the expression ele.style.width. However, the value still isn't directly useful - we have to parse a number out of this returned string using the parseInt() method.

To add to this discussion, even just having a value won't necessarily solve the width problem - what if we had a percentage width:

<p style="width: 10%;">A paragraph</p>
ele.style.width; // "10%"

As you can see here, we get the same "10%" value returned by ele.style.width which is of no use to us, at least in this case. We wanted an absolute pixel width but the style property limited us by returning whatever we wrote, as it is.

But this doesn't stop here - exploring the other side of the mirror, what if we wanted to get an element's distance from the top of an HTML document? It turns out that this doesn't only depend on the margins and positions of the element itself, but also on these properties of all its parents.

Consider the following example where the <p> element has a distance of 140px from the top of the document:

<body style="padding: 100px;margin-top: 20px">
    <div style="margin-top: 20px;">
        <p>A paragraph</p>

This value comes about after considering the margins and padding of <div> as well as those of the <body> element.

In real scenarios, however, we need to consider much more than just these two properties - we need to look into border, box-sizing, position, relative dimensions and way more.

Therefore it turns out that style doesn't offer us any reliable result to get the dimensions or positional co-ordiantes of HTML elements on a document. We definitely need better alternatives, that work efficiently and effectively in solving this problem.

Let's discover those....