How to Get Computed Styles of an Element with JavaScript?

Spread the love

To get computed styles of an element with JavaScript, we can use the window.getComputedStyle method.

For instance, if we have:

<div>
  hello
</div>

Then we write:

const element = document.querySelector('div')
const style = window.getComputedStyle(element)
console.log(style)

We get the div with document.querySelector.

Then we call window.getComputedStyle with element as the argument.

Therefore, the console log should show all the computed CSS properties with their values for the div.

By John Au-Yeung