The Document Object Model - JavaScript: Novice to Ninja - page 217

There is a function called getComputedStyle() that will retrieve all the style inform-
ation of an element that is given as a parameter. This is a read-only property, so is only used
for finding out information about the style of an element.
For example, if you wanted all the styles applied to the bike paragraph, you could use the
following:
bike = document.getElementById('bike');
<< <p id="bike">
styles = getComputedStyle(bike);
<< CSS2Properties { align-content: "stretch", align-items:
"stretch"
↵ , align-self: "stretch", animation-delay: "0s",
↵ animation-direction: "normal", animation-duration: "0s",
↵ animation-fill-mode: "none", animation-iteration-count:
"1",
↵ animation-name: "none", 203 more… }
As you can see, it returns an object (more specifically, it is a CSSStyleDeclaration
object) that contains a list of property-value pairs of all the CSS styles that have been ap-
plied to the element given as an argument. In this example, there are over 200, although
CSSStyleDeclaration objects have some built-in methods to help extract the inform-
ation. For instance, if I wanted to find out about the element's color property I could use
this code in the console:
styles.getPropertyCSSValue('color').cssText;
<< "rgb(0, 0, 0)"
This tells us that the color of the text is rgb(0, 0, 0) , which is black.
You can read more on the Mozilla Developer Network about the getCom-
putedStyle() function and about CSSStyleDeclaration objects.
Use with Caution
While it may seem useful to be able to edit the styles of elements on the fly like this, it is
much better practice to dynamically change the class of an element and keep the relevant