The window.getComputedStyle() method returns an object that reports 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 simply indexing with CSS property names.


var style = window.getComputedStyle(element[, pseudoElt]);
The Element for which to get the computed style.
A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements.
Note: Prior to Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), the pseudoElt parameter was required. No other major browser required this parameter be specified if null. Gecko has been changed to match the behavior of other browsers.

The returned style is a live CSSStyleDeclaration object, which updates itself automatically when the element's style is changed.


In this example we style a simple <div> element, then retrieve the styles using getComputedStyle(), printing them into the text content of the <div>.

p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
  font-family: sans-serif;
  background: purple;
  color: white;
  text-align: center;
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') + '.';



The returned object is of the same CSSStyleDeclaration type as the object returned from the element's style property; however, the two objects have different purposes. The object returned from getComputedStyle is read-only and can be used to inspect the element's style (including those set by a <style> element or an external stylesheet). The object should be used to set styles on a specific element.

The first argument must be an Element (passing a non-Element Node, like a #text Node, will throw an error). Starting in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0), returned URL values now have quotes around the URL, like this: url("").


In many code samples online, 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 some combination of (1) folks not wanting to write a spec for window and (2) making an API that was also usable in Java. However, there is a single case where the defaultView's method must be used: when using Firefox 3.6 to access framed styles.

Use with pseudo-elements

getComputedStyle can pull style info from pseudo-elements (for example, ::after, ::before, ::marker, ::line-marker—see spec here).

  h3::after {
    content: ' rocks!';

<h3>generated content</h3> 

  var h3 = document.querySelector('h3'); 
  var result = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'


The returned CSSStyleDeclaration object will contain active values for all supported CSS property longhand names.  An example longhand name is border-bottom-width with border-width and border being example shorthand property names. It is safest to query for values using only longhand names like font-size.  Querying with shorthand names like font will not work with the majority of browsers.

The CSS property values may be accessed using the getPropertyValue(propName) API or by indexing directly into the object such as cs[' z-index'] or cs.zIndex.

The values returned by getComputedStyle are known as resolved values. These are usually the same as the CSS 2.1 computed values, but for some older properties like width, height or padding, they are instead the used values. Originally, CSS 2.0 defined the computed values to be the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. For CSS 2.0 properties, the getComputedStyle function returns the old meaning of computed values, now called used values. An example of difference between pre- and post-layout values includes the resolution of percentages that represent the width or the height of an element (also known as its layout), as those will be replaced by their pixel equivalent only in the used value case.

The returned value is, in certain known cases, expressly inaccurate by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site. See and for details of the examples of how this is implemented. Most other modern browsers have applied similar changes to the application of pseudo-selector styles and the values returned by getComputedStyle.

During a CSS transition, 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 value auto. So if you apply top:auto; and bottom:0; on an element with height:30px and its containing block is height:100px;, upon requesting the computed style for top, Firefox will return top:70px, as 100px-30px=70px.


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

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support Yes
Full support Yes
Notes Before version 62 this function returned null when called on a Window with no presentation (e.g. an iframe with display: none; set). Since 62 it returns a CSSStyleDeclaration object with length 0, containing empty strings (bug 1467722; also see bug 1471231 for further work).
IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support Yes
Full support Yes
Notes Before version 62 this function returned null when called on a Window with no presentation (e.g. an iframe with display: none; set). Since 62 it returns a CSSStyleDeclaration object with length 0, containing empty strings (bug 1467722; also see bug 1471231 for further work).
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
Pseudo-element supportChrome Full support YesEdge ? Firefox Full support YesIE Full support 9Opera Full support 15Safari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes


Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also