window.getComputedStyle() returns a live, read-only style object with the resolved CSS values for an element after stylesheets and the cascade (MDN).
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call window.getComputedStyle. Start with this line.
getComputedStyle(el[, pseudo])| Call | What it does |
|---|---|
getComputedStyle(el[, pseudo]) | Primary signature. |
window.getComputedStyle(...) | Call with the arguments your case needs. |
Built into the browser. Call window.getComputedStyle(...) (or the global getComputedStyle(...)) — no import required.
getComputedStyle(el[, pseudo])| Parameter | Description |
|---|---|
| element | Required. Must be an Element (else TypeError) |
| pseudoElt | Optional. Pseudo selector string, e.g. "::before" |
| Return Value | Description |
|---|---|
| * | Live read-only style object |
Read computed color and font-size with getPropertyValue.
const el = document.getElementById("box");
const styles = window.getComputedStyle(el);
console.log(styles.getPropertyValue("color"));
console.log(styles.getPropertyValue("font-size"));#box.rgb(...) / rgba(...).element.styleInline style is only what you set; computed includes the cascade.
const el = document.getElementById("box");
// only inline:
console.log("inline color:", el.style.color);
// final rendered:
console.log("computed color:", getComputedStyle(el).color);el.style. Empty string if not set inline.The returned object also exposes camelCase property names.
const styles = getComputedStyle(document.getElementById("box"));
console.log(styles.fontSize); // same idea as getPropertyValue("font-size")
console.log(styles.backgroundColor);getComputedStyle. Keep the object.font-size → fontSize.getPropertyValue when the name is dynamic or custom.Pass a second argument to read ::before / ::after styles.
const h3 = document.querySelector("h3");
const after = getComputedStyle(h3, "::after");
console.log(after.getPropertyValue("content"));
// e.g. '" rocks!"' when CSS sets content: " rocks!";"::after". Second argument to getComputedStyle.content. Often quoted in the returned string.::part()) can throw TypeError.parseFloat for MathComputed lengths include units — strip them when you need a number.
const styles = getComputedStyle(document.getElementById("box"));
const widthPx = parseFloat(styles.width);
console.log(styles.width); // e.g. "200px"
console.log(widthPx); // e.g. 200width. Usually a string with px.parseFloat. Keeps the leading number.Window.getComputedStyle() is marked Baseline Widely available on MDN (since July 2015). Browser CSSOM — not a Node.js built-in.
Read resolved CSS values across modern browsers.
Bottom line: Safe default for reading final styles. Prefer classes for writing styles.
Test CSS media queries with window.matchMedia().
8 people found this page helpful