How to Get Current Value of a CSS Property in 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);