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


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.


Get the computed style of an HTML element

  • The HTML
<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