Skip to content

How to get the value of a CSS property in JavaScript

The Valley of Code

Your Web Development Manual

Say you want to fetch the value of a CSS property in a web page, one that is set using a stylesheet. How can you do so?

Say you want to fetch the value of a CSS property in a web page, one that is set using a stylesheet.

The style property of an element does not return it, because it only lists CSS properties defined in inline styles, or dynamically.

Not the properties defined in an external stylesheet.

So, how do you do it? Use getComputedStyle(), a global function:

const element = document.querySelector('.my-element')
const style = getComputedStyle(element)
style.backgroundColor //the RGB value
→ Get my JavaScript Beginner's Handbook
→ Read my JavaScript Tutorials on The Valley of Code
→ Read my TypeScript Tutorial on The Valley of Code
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)