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

1 - About

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

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.

3 - Example

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);

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap