Window: getComputedStyle() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The
Window.getComputedStyle()
method returns an object
containing the values of all CSS properties of an element, after applying active
stylesheets and resolving any basic computation those values may contain.
Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.
Syntax
getComputedStyle(element)
getComputedStyle(element, pseudoElt)
Parameters
Return value
A live CSSStyleDeclaration
object, which updates automatically when the element's styles are changed.
Exceptions
TypeError
-
If the passed object is not an
Element
or thepseudoElt
is not a valid pseudo-element selector or is::part()
or::slotted()
.Note: Valid pseudo-element selector refers to syntactic validity, e.g.
::unsupported
is considered valid, even though the pseudo-element itself is not supported. Additionally, the latest W3 standard explicitly supports only::before
and::after
, while the CSS WG draft does not restrict this value. Browser compatibility may vary.
Examples
In this example we style a <p>
element, then retrieve those styles
using getComputedStyle()
, and print them into the text content of the
<p>
.
HTML
<p>Hello</p>
CSS
p {
width: 400px;
margin: 0 auto;
padding: 20px;
font: 2rem/2 sans-serif;
text-align: center;
background: purple;
color: white;
}
JavaScript
const para = document.querySelector("p");
const compStyles = window.getComputedStyle(para);
para.textContent =
`My computed font-size is ${compStyles.getPropertyValue("font-size")},\n` +
`and my computed line-height is ${compStyles.getPropertyValue(
"line-height",
)}.`;
Result
Description
The returned object is the same CSSStyleDeclaration
type as the object
returned from the element's style
property. However,
the two objects have different purposes:
-
The object from
getComputedStyle
is read-only, and should be used to inspect the element's style — including those set by a<style>
element or an external stylesheet. -
The
element.style
object should be used to set styles on that element, or inspect styles directly added to it from JavaScript manipulation or the globalstyle
attribute.
The first argument must be an Element
. Non-elements, like a
Text
node, will throw an error.
defaultView
In many code samples, getComputedStyle
is used from the
document.defaultView
object. In nearly all cases, this is needless, as
getComputedStyle
exists on the window
object as well. It's
likely the defaultView
pattern was a combination of folks not wanting to
write a testing spec for window
and making an API that was also usable in
Java.
Use with pseudo-elements
getComputedStyle
can pull style info from pseudo-elements (such as
::after
, ::before
, ::marker
,
::line-marker
— see the pseudo-element spec).
<style>
h3::after {
content: " rocks!";
}
</style>
<h3>Generated content</h3>
<script>
const h3 = document.querySelector("h3");
const result = getComputedStyle(h3, ":after").content;
console.log("the generated content is: ", result); // returns ' rocks!'
</script>
Notes
-
The returned
CSSStyleDeclaration
object contains active values for CSS property longhand names as well as shorthand names. For example, the returned object contains entries forborder-bottom-width
in addition to theborder-width
andborder
shorthand property names. You can query values with longhand names likefont-size
as well as shorthand names likefont
. -
CSS property values may be accessed using the
getPropertyValue(propName)
method or by indexing directly into the object using array or dot notation such asobj['z-index']
orobj.zIndex
. -
The values returned by
getComputedStyle
are resolved values. These are usually the same as CSS 2.1's computed values, but for some older properties likewidth
,height
, orpadding
, they are instead the same as used values. Originally, CSS 2.0 defined the computed values as the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined them as pre-layout, and used values as post-layout. For CSS 2.0 properties,getComputedStyle
returns the old meaning of computed values, now called used values. An example difference between pre- and post-layout values includes the resolution of percentages forwidth
orheight
, as those will be replaced by their pixel equivalent only for used values. -
Returned values are sometimes deliberately inaccurate. To avoid the "CSS History
Leak" security issue, browsers may lie about the computed styles for a visited link,
returning values as if the user never visited the linked URL. See Plugging the CSS history leak and Privacy-related changes coming to CSS
:visited
for examples of how this is implemented. -
During CSS transitions,
getComputedStyle
returns the original property value in Firefox, but the final property value in WebKit. -
In Firefox, properties with the value
auto
return the used value, not the valueauto
. So if you applytop:auto
andbottom:0
on an element withheight:30px
and a containing block ofheight:100px
, Firefox's computed style fortop
returns70px
, as 100 − 30 = 70. - For compatibility reasons, serialized color values are expressed as
rgb()
colors if the alpha channel value is exactly1
, andrgba()
colors otherwise. In both cases, legacy syntax is used, with commas as separators (for examplergb(255, 0, 0)
).
Specifications
Specification |
---|
CSS Object Model (CSSOM) # dom-window-getcomputedstyle |
Browser compatibility
BCD tables only load in the browser