How to get the value of a CSS property in JavaScript
New Courses Coming Soon
Join the waiting lists
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
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X