Free tools Windows power users keep installed
One-click scans. No signup required.
If a stylesheet says font-size: 1.2rem but JavaScript returns something like 19.2px, the browser has not lost the rule. It has resolved the relative length into a computed value. Use getComputedStyle() to inspect the browser-resolved style; use CSS Typed OM when you need a structured value with a unit, where supported. Neither is a universal way to retrieve the exact text originally written in a stylesheet.
Why does JavaScript show pixels instead of rem?
rem is relative to the font size of the root element, usually html. When the browser computes styles, it resolves that relationship. If the root font size is 16 pixels and an element’s font size is 1.2rem, the resolved size is 19.2 pixels. The 16-pixel figure is a common browser default, not a guarantee: user settings and page styles can change the root size. In the root element’s own font-size declaration, rem refers instead to the initial font-size value. MDN’s CSS length reference explains these unit relationships.
As an Amazon Associate I earn from qualifying purchases.
em and rem are both relative lengths, but use different reference points. An em generally follows the element’s calculated font size; when used in that element’s font-size declaration, it is based on the inherited font size. A rem refers to the root element’s font size.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →What does getComputedStyle() return?
window.getComputedStyle(element) gives you a live, read-only style object reflecting the element after active stylesheets have been applied and values computed. It can inspect styles from stylesheets as well as inline declarations. By contrast, element.style represents inline styles and values set there through JavaScript; it is not a general view of all CSS rules affecting the element.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
const element = document.querySelector(".example");
const resolvedFontSize = getComputedStyle(element).getPropertyValue("font-size");
console.log(resolvedFontSize); // commonly a resolved pixel valueA computed style is not necessarily the original source text. CSS serialization may express a length in pixels after resolving relative units; for some layout-dependent properties, the reported value may reflect a used value. Therefore, checking whether the returned string contains rem is not a reliable way to determine what unit an author wrote. See MDN’s getComputedStyle() documentation and its CSS value serialization reference.
How can you inspect a value with its unit?
CSS Typed OM represents CSS values as typed JavaScript objects rather than only familiar CSS strings. For a supported element and property, computedStyleMap() can return a value object with fields such as value and unit.
const element = document.querySelector(".example");
const value = element.computedStyleMap().get("font-size");
if (value) {
console.log(value.value, value.unit);
}For example, MDN’s Typed OM guide demonstrates parsing a custom property containing 1.2rem and reading the resulting value and unit. Typed data can be useful when code needs to work with CSS values as values rather than manipulate strings. It still should not be treated as a promise that every computed property will preserve the original unit or authored token. Read MDN’s CSS Typed OM guide for the API’s model and examples.
Which approach should you use?
| Need | Approach | What to expect |
|---|---|---|
| Find the browser-resolved style of an element | getComputedStyle(element) |
Resolved style values in a familiar CSS style object; not guaranteed to retain authored unit spelling. |
| Work with structured CSS values and unit information | element.computedStyleMap() |
Typed objects where the browser supports the relevant API and value. |
| Recover the exact literal written by an author | Neither API is a universal solution | Computed-style inspection answers what the browser resolved, not necessarily the exact source notation. |
What if Typed OM is unavailable?
CSS Typed OM has limited availability and is not Baseline according to MDN. If your code must work across a broad range of browsers, feature-detect the method and provide a fallback for the task you actually need to perform. The fallback may use getComputedStyle() for resolved values, but do not treat its pixel output as a recovery of the original rem declaration.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
const element = document.querySelector(".example");
if (element && typeof element.computedStyleMap === "function") {
const value = element.computedStyleMap().get("font-size");
console.log(value?.value, value?.unit);
} else if (element) {
console.log(getComputedStyle(element).getPropertyValue("font-size"));
}The fallback preserves broad access to resolved style inspection, not parity with Typed OM’s typed representation. Check MDN’s CSS Typed OM documentation for current availability information before relying on browser-specific behavior.
Quick Recap
Best Value
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.
