How to Get Current Value of a CSS Property in Javascript

Use-Cases of this Tutorial

  • Find values of CSS properties of a given element with Javascript.

The window.getComputedStyle() method can be used to get current values of CSS properties of an element. The CSS properties are returned after resolving all style rules from stylesheets and other sources.

window.getComputedStyle() returns an object containing all CSS properties associated with the element. The value of any property can be retrieved using the camel case notation of the CSS property name.

// DOM element
var element = document.querySelector("#example-element");

// all CSS styles
var styles_applied = window.getComputedStyle(element);

// CSS "width" value 
// "600px"
console.log(styles_applied.width);

// CSS "height" value
// "211.5px"
console.log(styles_applied.height);

// CSS "backgroundColor" value
// "rgb(245, 242, 240)"
console.log(styles_applied.backgroundColor);
How to Get CSS Values of Pseudo Elements with Javascript