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.
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.
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:
var ele = document.getElementsByTagName("p"); 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
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> </div> </body>
This value comes about after considering the margins and padding of
<div> as well as those of the
In real scenarios, however, we need to consider much more than just these two properties - we need to look into
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....