Element sizes and positions
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.
Let's start by going over the limitations we have in getting an element's dimensions using the style property before moving on to explore solutions to it, in the next chapters.
The problem with style
Can we use the style property on DOM elements to get their absolute widths?
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 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 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> </div> </body>
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....