getComputedStyle()
Returns an element’s computed styles, meaning the CSS values the browser actually applied after taking every rule into account.
- Returns
- A live, read-only
CSSStyleDeclarationobject with the computed values of every CSS property.
Example
#const badge = document.querySelector('#badge')
const styles = getComputedStyle(badge)
console.log(badge.style.color === '')
console.log(styles.color)
console.log(styles.fontSize)
console.log(styles.fontWeight)
console.log(styles.borderTopColor)
console.log(styles.display)element.style is empty, since the color comes from the class. The computed styles show the color in rgb() format, the 1.25rem size in pixels, bold as 700, and currentColor turned into a specific color. inline is the default display mode for a <span> element.
Definition and usage
#The getComputedStyle() function (the full name is window.getComputedStyle()) returns an object with the final values of every CSS property on an element. It accounts for stylesheets, inline styles, inheritance, and the browser’s default values. It’s the simplest way to check, say, a color set by a class in JavaScript, since element.style only sees styles written into the style attribute.
Values are returned in computed form, usually normalized: colors as rgb(…), lengths in pixels (1.25rem becomes, say, "20px"), and keywords like bold as numbers ("700"). They’re always strings, so convert them to numbers before calculating, e.g. with parseFloat().
The returned object is “live”: after changing a class or style, the next read shows the new value. It’s read-only, so change styles through element.style or classList. The second argument lets you read a pseudo-element’s styles, e.g. getComputedStyle(el, "::before").content, and you read CSS variable values with the getPropertyValue("--name") method.
Syntax
#getComputedStyle(element)
getComputedStyle(element, pseudoElement)
getComputedStyle(element).propertyName
getComputedStyle(element).getPropertyValue(name)Parameters
#element
Element
The element whose computed styles you want to read.pseudoElement
optional, string
A pseudo-element, e.g."::before"or"::after".
More examples
#const progress = document.querySelector('#progress')
const { width, paddingLeft } = getComputedStyle(progress)
console.log(width, paddingLeft)
console.log(parseFloat(width) - 2 * parseFloat(paddingLeft))
console.log(width + 10)Computed values are strings with a unit. parseFloat() extracts the numbers from them, while plain addition concatenates the strings, as you can see in the last line.
const lesson = document.querySelector('#lesson')
const before = getComputedStyle(lesson, '::before')
console.log(before.content)
console.log(before.color)
console.log(getComputedStyle(document.documentElement).getPropertyValue('--accent'))const panel = document.querySelector('#panel')
const styles = getComputedStyle(panel)
console.log(styles.display)
panel.classList.add('hidden')
console.log(styles.display)There’s no need to call getComputedStyle() again. The same object shows the new value right away after the class changes.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Computed values are strings with units, e.g.
"16px". UseparseFloat()before calculating with them. - You’ll usually get colors in
rgb(…)format, even if they were written in CSS as a#hexvalue or a name. Compare them in the same format. - Reading computed styles can force the browser to recalculate styles and the page layout. Don’t interleave reads with style changes in a loop.
Related entries
#- HTMLElement.styleAn object of styles set directly on an element (inline), for reading and changing individual CSS properties.
- Element.classListAn object for adding, removing, toggling, and checking an element’s CSS classes.
- Element.getBoundingClientRect()Returns an element’s size and its position relative to the viewport, as a DOMRect object.
- Number.parseFloat()Converts the start of a string into a floating-point number.
- matchMedia()Checks in JavaScript whether the page matches a CSS media query, e.g. (max-width: 600px), and lets you react to changes in the result.
Spotted a mistake or missing an example? Write to us.