CSS - How to get the computed style values of an HTML element

About

To get the computed value of a style for an HTML element, you use the window.getComputedStyle function via javascript

Part of the calculation of values depends on the formatting algorithm appropriate for the target media type.

For example, if the target medium is the screen, user agents apply the visual formatting model.

Example

Get the computed style of an HTML element

  • The HTML
<h1>Title</h1>
<p>Below in the log container, you can see all default computed style of the browser for the title.
let title = document.querySelector('h1');
let styles = window.getComputedStyle(title);
for(var i = 0; i < styles.length; i++){
    attributeName = styles.item(i);
    value = styles .getPropertyValue(attributeName);
    console.log(attributeName+" : "+value);
}

Powered by ComboStrap