JavaScript Element currentCSSZoom Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CURRENTCSSZOOM

Definition

Element.currentCSSZoom is a read-only number: the effective CSS zoom on an element — its own zoom multiplied by every ancestor’s zoom (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.currentCSSZoom. Start with this line.

JavaScript
element.currentCSSZoom
CallWhat it does
element.currentCSSZoomPrimary signature.

Built into the browser. Read or assign el.currentCSSZoom — no import required.

Library declarations
JavaScript
element.currentCSSZoom

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Number (effective zoom)

JavaScript Examples

Example 1 — Feature-Detect and Read

Check support, then read currentCSSZoom on an unzoomed element.

JavaScript
if ("currentCSSZoom" in Element.prototype) {
  const el = document.getElementById("box");
  console.log(el.currentCSSZoom);  // 1 when unzoomed
} else {
  console.log("not supported");
}
Try It Yourself

How It Works

  1. Detect the property. in Element.prototype avoids errors on older engines.
  2. Get a normal element. No CSS zoom is set.
  3. Read the value. Effective zoom defaults to 1.
  4. Fallback. If unsupported, skip or use another measurement strategy.

Example 2 — Nested Zooms Multiply

Parent zoom: 2 and child zoom: 3 → effective 6.

JavaScript
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// parent.style.zoom = "2"; child.style.zoom = "3";

console.log(parent.currentCSSZoom);  // 2
console.log(child.currentCSSZoom);   // 6
Try It Yourself

How It Works

  1. Zoom the parent. Its effective zoom is 2.
  2. Zoom the child. Local zoom is 3.
  3. Multiply the chain. 2 × 3 = 6 on the child.
  4. Why it matters. Visual size compounds; the property reports that product.

Example 3 — Not Rendered Returns 1

Even inside a zoomed parent, display: none yields 1.

JavaScript
const parent = document.getElementById("parent");
const hidden = document.getElementById("hidden");
// parent.style.zoom = "3"; hidden.style.display = "none";

console.log(parent.currentCSSZoom);  // 3
console.log(hidden.currentCSSZoom);  // 1
Try It Yourself

How It Works

  1. Zoom a rendered parent. It reports 3.
  2. Hide the child. display: none removes its CSS box.
  3. Read the hidden node. MDN: no layout box → currentCSSZoom is 1.
  4. Rule. Only rendered elements carry a meaningful effective zoom.
Compatibility

Browser Support

Element.currentCSSZoom is Baseline 2026 Newly available (MDN: since March 2026). Use feature detection before relying on it in production.

✓ Baseline · Newly available

Element.currentCSSZoom

Effective CSS zoom as a number — multiply nested zoom values; returns 1 when not rendered.

New Newly available (2026)
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
currentCSSZoom Detect first

Bottom line: Safe on latest evergreen browsers from March 2026 onward. Gate with if ("currentCSSZoom" in Element.prototype) for older clients.

Frequently Asked Questions

A read-only number: the effective CSS zoom for the element — its own zoom multiplied by every ancestor's zoom. If the element is not rendered, it returns 1.
No. MDN marks Element.currentCSSZoom as Baseline 2026 Newly available (since March 2026). It is not Deprecated, Experimental, or Non-standard. Still feature-detect on older browsers.
No. It is read-only. Change zoom with CSS (or element.style.zoom), then read currentCSSZoom again.
They multiply. If a parent has zoom: 2 and a child has zoom: 3, the child's currentCSSZoom is 6.
If the element (or an ancestor) has no CSS box — for example display: none — currentCSSZoom is 1.
Those APIs ignore CSS zoom. Multiply (or divide) by currentCSSZoom when you need to reconcile them with viewport-relative sizes like getBoundingClientRect().

Next: customElementRegistry

Learn which CustomElementRegistry created a custom element.

customElementRegistry tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element clientWidth Property JavaScript Element customElementRegistry Property