Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
If a CSS declaration uses rem but JavaScript reads a value such as 16px, the browser has usually resolved the relative length against the root element’s font size. The unit has not vanished from your stylesheet; getComputedStyle() reports resolved style, not a promise to preserve the original spelling. Use it to learn the value the browser resolved. If you need unit-aware CSS values, consider CSS Typed OM where supported—but neither API is a universal way to recover the exact text originally authored.
Why does JavaScript show pixels instead of rem?
rem is relative to the font size of the root element, typically <html>. A browser therefore has to resolve the relationship before it can use the length for rendering. When JavaScript reads a computed style, the returned serialization may express that resolved length in pixels rather than retain the original rem token. This is a CSS value-resolution and serialization issue, not evidence that the stylesheet rule was ignored. MDN’s getComputedStyle() reference describes its return value as resolved styles; MDN’s CSS length reference explains the units and their reference points.
A common browser default root font size is 16px, but it is not universal: user preferences or page styles can change it. In the root element’s own font-size declaration, rem refers to the initial value rather than recursively to that declaration’s result. em differs: it is generally relative to the element’s calculated font size, or to the inherited font size when used in a font-size declaration. MDN’s length documentation details these distinctions.
What does getComputedStyle() actually return?
getComputedStyle(element) returns a live, read-only style object reflecting active stylesheets and computed values. It can report styles originating in stylesheet rules, not only inline declarations. By contrast, element.style represents inline styles (including ones set through JavaScript); it is not a general view of the final style applied to the element. The computed value may be resolved from the authored value, and for some layout-dependent properties the serialization may reflect a used value. As a result, the returned string is not necessarily the source text that appeared in a stylesheet. See MDN’s API documentation and MDN’s computed-value reference.
#1 Best Overall
Read the browser-resolved font size
If the question is “What font size did the browser resolve for this element?”, computed style is the straightforward answer:
const element = document.querySelector(".example");
const resolvedFontSize = getComputedStyle(element).getPropertyValue("font-size");
console.log(resolvedFontSize); // commonly a resolved pixel valueThe example asks for the resolved font-size; it does not determine which unit the author originally typed. The value can also depend on the actual root font size and the styles currently active on the page.
Rank #2
How can I inspect a CSS value with its unit?
CSS Typed OM represents CSS values as typed JavaScript objects rather than only familiar CSS strings. For example, where the API is available, computedStyleMap() can return a value with separate value and unit fields:
const value = element.computedStyleMap().get("font-size");
console.log(value.value, value.unit);MDN’s CSS Typed OM guide also demonstrates parsing a custom property containing 1.2rem into a typed value. Typed values can be useful when code needs structured value and unit information. They should not be treated as a guaranteed way to reconstruct every declaration’s original literal syntax; a computed value has already passed through CSS resolution.
Which method should I use?
| Need | Use | What to expect |
|---|---|---|
| Find the browser-resolved style for an element | getComputedStyle(element) |
A resolved CSS value, commonly serialized as a string; the author’s original unit spelling is not guaranteed. |
| Work with CSS values as typed objects and inspect unit information | CSS Typed OM, such as computedStyleMap() |
Structured CSS values where supported; this is not a universal recovery mechanism for original source text. |
| Read inline or JavaScript-set declarations | element.style |
The element’s inline style declarations, not the complete result of the cascade. |
getComputedStyle() is widely available. CSS Typed OM has limited availability and is not Baseline according to MDN’s CSS Typed OM API reference. If your code must work across a broad range of browsers, feature-detect Typed OM and provide a computed-style fallback when that fallback answers the same question your code needs to ask.
What if I need the authored rule, not the resolved value?
First decide whether you need the browser’s effective value or the original declaration text. Computed style answers the first question; it does not promise the second. If your application owns the stylesheet or the declaration, retain the authored value in your own data or inspect the relevant stylesheet rule where access is permitted. Stylesheets from another origin may not be readable because of browser security restrictions, and inspecting rules still does not make computed style a source-preserving API. If the goal is simply to scrape the CSS currently affecting an element, getComputedStyle() is generally the practical route—but interpret its result as resolved style, not as a recovered formula. MDN’s guide to retrieving style information covers stylesheet and style inspection concepts.
Quick Recap
Rank #4
Diagnose the missing unit
- Check which question you are asking. For the final browser-resolved size, read
getComputedStyle(element).getPropertyValue("font-size"). Do not search that string forremif the authored unit is what you need. - Check the root size. Inspect
getComputedStyle(document.documentElement).fontSizeand account for any root font-size rule or user preference before assuming the common16pxdefault applies. - Check the source of the declaration.
element.stylecovers inline declarations; stylesheet rules and inherited or cascaded results require a different inspection approach. - Use Typed OM only when its support and representation fit the task. Feature-detect it, and keep a fallback for browsers where
computedStyleMap()is unavailable. - Preserve source data if exact authored syntax matters. Neither computed-style API should be assumed to reproduce every original token or formula.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
