Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

CSSOM Computed Styles

Chapter 57 4 mins

Learning outcomes:

  1. What are computed styles
  2. The getComputedStyle() function

The getComputedStyle() function

Back in the style property chapter we saw that the property can't be used to get those styles of an element written inside a style tag or an external stylesheet - only inline styles were applicable.

But then what if we want to actually all styles of a given element except for just those in the style attribute? Is there really any way to get them using JavaScript?

The answer is simple and clear cut: Yes there is a way to do so using the getComputedStyle() function on the window object.

The method takes as an argument an element node and returns all its computed styles in an object.

All lengths and sizes get converted to their absolute pixel values like em → px, % → px and so on. All inherited CSS properties are also taken into account in getComputedStyle(). Its literally a huge object with ALL CSS properties returned for a given element even if they aren't explicity set in stylesheets.

Examples

Consider the code below:

p {
    width: 100px;
    height: 50px;
    padding: 10px;
    font-size: 2em;
}

With this CSS in place, we can call getComputedStyle() and save the object in a variable as follows:

var ele = document.getElementsByTagName("p")[0];
var styles = getComputedStyle(ele);

console.log(styles.width); // 100px
console.log(styles.height); // 50px
console.log(styles.padding); // 10px

// font-size will be converted to its absolute pixel value
console.log(styles.fontSize); // 32px not 2em

Remember that the values returned by the properties of this function are computed CSS values - properties like width or height won't return a number but instead a string like "100px".

Before using these values in calculations we'll first have to convert them to numbers using the ways we discussed in the chapter Numbers Basic Concepts.

Things to know

Before going to use the function getComputedStyle() it would be a good idea to go over some of its important information.

The function returns a live object

getComputedStyle() returns a live object i.e as the styles of the element are changed the returned object also changes. We don't need to call the function again in order to get the updated CSS styles. It all happens LIVE!

Let's demonstrate this to you:

var ele = document.getElementsByTagName("p")[0];
var styles = getComputedStyle(ele); // function called only once

function listStyles() {
    document.getElementById("o").innerHTML = "width: " + styles.width + "<br>" + "height: " + styles.height + "<br>" + "background-color: " + styles.backgroundColor 
}

First get the initial computed styles of p listed. Then change the styles of p and again get its computed styles. You'll notice that they change without you needing to call getComputedStyle() again.

getComputedStyle() has performance issues

Although it might look amazing to get a hefty object with all properties calculated for you to work with, getComputedStyle() is not that amazing when it comes to performance.

Calling it means that the whole document needs to be re-styled, which you might not notice at all while calling the function. Restyling is to redo the layout and painting of a document, both of which can are quite expensive tasks for the browser.

Calling getComputedStyle() with scroll or resize events can really knock out the performance of an application, owing to style recalculations, introducing a considerable amount of jank and lag to it in turn damaging the whole user experience.

Therefore before using it make sure that do you really need it or not. Can your work be accomplished by any other property or method. Calling it once in the beginning of a script might be fine, but in scroll, resize or any fast-firing events a relatively serious issue!

In conclusion

And with this we conclude two things, firstly this chapter on computed styles and secondly this whole JavaScript dimensions unit.

It was, no doubt, a bit challenging unit with multiple concepts to comprehend and work with. If you've got a solid grip of JavaScript dimensions then you've got a solid grip in being able to build many stunning JavaScript features all on your own!

Rememeber to practice these concepts occasioncally, since they can get out of your head quite easily if left undealt with for some time. Pracitce and move on! That is programming.

We'll see you in the upcoming quiz on this whole unit to test how much you've learnt from it.