element

TheElement for which to get the computed style.

pseudoEltOptional

A string specifying the pseudo-element to match. Omitted (ornull) forreal elements.

AliveCSSStyleDeclaration object, which updates automatically when the element's styles are changed.

Note that:

• The returnedCSSStyleDeclaration object contains active values for CSS propertylonghand names as well as shorthand names. For example, the returned object contains entries forborder-bottom-width in addition to theborder-width andbordershorthand property names.
• 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. SeePlugging the CSS history leak andPrivacy-related changes coming to CSS:visited for examples of how this is implemented.
• DuringCSS transitions,getComputedStyle returns the original property value in Firefox, but the final property value in WebKit.
• In Firefox, properties with the valueauto 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 asrgb() 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)).

The returned object is the sameCSSStyleDeclaration type as the object returned from the element'sstyle property. However, the two objects have different purposes:

• The object fromgetComputedStyle is read-only, and should be used to inspect the element's style — including those set by a<style> element or an external stylesheet.
• Theelement.style object should be used toset styles on that element, or inspect styles directly added to it from JavaScript manipulation or the globalstyle attribute.

TypeError

If the passed object is not anElement or thepseudoElt is not a valid pseudo-element selector or is::part() or::slotted().

Note:Valid pseudo-element selector refers to syntacticvalidity, e.g.,::unsupported is considered valid, even though thepseudo-element itself is not supported.

In this example we style a<p> element, then retrieve those stylesusinggetComputedStyle(), 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

getComputedStyle can pull style info frompseudo-elements, such as::after,::before,::marker, or::line-marker.

<h3>Generated content</h3>

h3::after {  content: " rocks!";}

const h3 = document.querySelector("h3");const result = getComputedStyle(h3, "::after").content;console.log("the generated content is: ", result); // returns ' rocks!'

• window.getDefaultComputedStyle()
• getPropertyValue()
• Element.computedStyleMap()
• Resolved value