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
var style = window.getComputedStyle(element [, pseudoElt]);
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.
The returned style
is 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.
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
let para = document.querySelector('p'); let compStyles = window.getComputedStyle(para); para.textContent = 'My computed font-size is ' + compStyles.getPropertyValue('font-size') + ',\nand 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> var h3 = document.querySelector('h3'); var 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 | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) The definition of 'getComputedStyle()' in that specification. |
Working Draft | |
Document Object Model (DOM) Level 2 Style Specification The definition of 'getComputedStyle()' in that specification. |
Obsolete | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getComputedStyle | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
1
| IE Full support 9 | Opera Full support 7.2 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android
Full support
4
| Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Pseudo-element support | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support 9 | Opera Full support 15 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.