Window: getComputedStyle() method
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
js
getComputedStyle(element)
getComputedStyle(element, pseudoElt)
Parameters
element
-
The
Element
for which to get the computed style. pseudoElt
Optional-
A string specifying the pseudo-element to match. Omitted (or
null
) for real elements.
Return value
A live CSSStyleDeclaration
object, which updates automatically when the element's styles are changed.
Throws
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
html
<p>Hello</p>
CSS
css
p {
width: 400px;
margin: 0 auto;
padding: 20px;
font: 2rem/2 sans-serif;
text-align: center;
background: purple;
color: white;
}
JavaScript
js
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).
html
<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. For example,border-bottom-width
instead of theborder-width
andborder
shorthand property names. It is safest to query values with only longhand names likefont-size
. Shorthand names likefont
will not work with most browsers. -
CSS property values may be accessed using the
getPropertyValue(propName)
API or by indexing directly into the object such asobj['z-index']
orobj.zIndex
. -
The values returned by
getComputedStyle
areresolved values
. These are usually the same as CSS 2.1'scomputed values
, but for some older properties likewidth
,height
, orpadding
, they are instead the same asused 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.
Specifications
Specification |
---|
CSS Object Model (CSSOM) # dom-window-getcomputedstyle |
Browser compatibility
BCD tables only load in the browser