Die Methode Window.getComputedStyle()
gibt ein Objekt zurück, das alle CSS-Eigenschaften eines Elements enthält; und zwar nachdem alle aktiven Stylesheets geladen und Basisberechungen ausgeführt wurden. Die Werte der einzelnen CSS-Eigenschaften werden durch die Schnittstelle des Objekts oder durch Indexierung der Eigenschafts-Namen aufgerufen.
Syntax
var style = window.getComputedStyle(element [, pseudoElt]);
element
- Das
Element
dessen berechneten Ergebnis wir holen möchten. 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.
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 psuedo-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) Die Definition von 'getComputedStyle()' in dieser Spezifikation. |
Arbeitsentwurf | |
Document Object Model (DOM) Level 2 Style Specification Die Definition von 'getComputedStyle()' in dieser Spezifikation. |
Veraltet | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getComputedStyle | Chrome Vollständige Unterstützung Ja | Edge Vollständige Unterstützung 12 | Firefox
Vollständige Unterstützung
Ja
| IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung Ja | Safari Vollständige Unterstützung Ja | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Firefox Android
Vollständige Unterstützung
Ja
| Opera Android Vollständige Unterstützung Ja | Safari iOS Vollständige Unterstützung Ja | Samsung Internet Android Vollständige Unterstützung Ja |
Pseudo-element support | Chrome Vollständige Unterstützung Ja | Edge ? | Firefox Vollständige Unterstützung Ja | IE Vollständige Unterstützung 9 | Opera Vollständige Unterstützung 15 | Safari Vollständige Unterstützung Ja | WebView Android Vollständige Unterstützung Ja | Chrome Android Vollständige Unterstützung Ja | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Vollständige Unterstützung Ja |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Kompatibilität unbekannt
- Kompatibilität unbekannt
- Siehe Implementierungshinweise.
- Siehe Implementierungshinweise.