The JavaScript getComputedStyle() method

Q: What is the difference between getComputedStyle() and element.style?

getComputedStyle() returns the actual rendered value from all sources (stylesheets included); element.style only reads inline styles set directly on the element.

Q: How do I read a CSS value set in my stylesheet?

Use getComputedStyle(el).propertyName (camelCase), e.g. getComputedStyle(el).fontSize.

Q: How do I check if an element is hidden?

Check getComputedStyle(el).display !== "none" (and visibility/opacity if relevant).

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

The getComputedStyle() method returns an element's actual rendered CSS values — including those from stylesheets, not just inline styles. getComputedStyle(el).color gives the real color in use. Unlike element.style (which only sees inline styles), it reads the final computed result. The values it returns are read-only.

Overview

getComputedStyle() tells you what an element actually looks like after all CSS has been applied. This is the crucial difference from the style property: el.style.color only reflects inline styles set directly on the element, so it's empty for anything styled by a stylesheet. getComputedStyle(el).color returns the final color in use, wherever it came from.

You call it on window (or globally) passing the element — getComputedStyle(el) — and read properties in camelCase, like .backgroundColor, .fontSize, .display. The returned object is read-only: it's for inspecting, not setting. To change styles, use element.style or toggle a class.

The values come back resolved, which can surprise you — colors are returned as rgb(...) regardless of how you wrote them, and lengths are usually in pixels ("16px"), even if the CSS used em or %. It's commonly used to check whether an element is visible (getComputedStyle(el).display !== "none") or to read a value before animating. It does force the browser to calculate layout, so avoid calling it in tight loops.

Syntax

const styles = getComputedStyle(element);

styles.color;            // "rgb(0, 0, 0)" (resolved)
styles.fontSize;         // "16px"
styles.display;          // "block"
getComputedStyle(el).getPropertyValue("--my-var"); // CSS variable

Parameters

The getComputedStyle() method accepts the following parameters.

Parameter	Description
`element`	The element whose computed (rendered) styles you want to read.

Example

Live example

<div id="box" style="font:15px system-ui;color:#1c7ce9;padding:14px;border:2px solid #1c7ce9">Styled box</div>
<pre id="out" style="font:14px ui-monospace,monospace;margin-top:8px"></pre>
<script>
  const styles = getComputedStyle(document.getElementById('box'));

  document.getElementById('out').textContent =
    'color:    ' + styles.color + '\n' +
    'fontSize: ' + styles.fontSize + '\n' +
    'display:  ' + styles.display;
</script>

Best practices

Use it to read styles applied by stylesheets — element.style only sees inline styles.
Remember the result is read-only; set styles with element.style or a class.
Expect resolved values — colors as rgb() and lengths in px.
Avoid calling it in tight loops; it can force a layout recalculation.

Frequently asked questions

What is the difference between getComputedStyle() and element.style?

getComputedStyle() returns the actual rendered value from all sources (stylesheets included); element.style only reads inline styles set directly on the element.

How do I read a CSS value set in my stylesheet?

Use getComputedStyle(el).propertyName (camelCase), e.g. getComputedStyle(el).fontSize.

Can I set styles with getComputedStyle()?

No, the returned object is read-only. Use element.style or toggle a class to change styles.

How do I check if an element is hidden?

Check getComputedStyle(el).display !== "none" (and visibility/opacity if relevant).

getBoundingClientRect() getElementById()

References