ThecurrentCSSZoom read-only property of theElement interface provides the "effective"CSSzoom of an element, taking into account the zoom applied to the element and all its parent elements.

The value calculated by multiplying the CSSzoom values of the element and all of its parents.For example, if three elements with zoom values of 2, 1.5, and 3, are nested within each other, the most deeply nested element will have acurrentCSSZoom value of 9.If the element doesn't have a CSS box, for example becausedisplay: none is set on the element or one of its parents, then thecurrentCSSZoom is set to 1.

Note that some methods, such asElement.getBoundingClientRect(), return dimensions and position that are relative to the viewport, and hence include the effects of CSSzoom.Other properties and methods return values that are relative to the element itself, and do not include the effects of zooming.These include, for example,client* properties such asElement.clientHeight,scroll*() methods likeElement.scroll(), andoffset* properties such asHTMLElement.offsetHeight.ThecurrentCSSZoom property can be used to scale these values to adjust for the effects of zooming.

Value

A number indicating the effective CSS zoom on the element, or 1 if the element is not rendered.

Examples

This example demonstrates how thecurrentCSSZoom is calculated.

First we define a nested structure of<div> elements where the "parent" is unzoomed and contains a nested element "child1" that haszoom: 2 applied, which in turn contains a nested element "child2" withzoom: 3 applied.The "child2" element contains two nested elements, one of which is not rendered, and neither of which have the zoom property applied.

<div>  parent  <div>    child1 (zoom: 2)    <div>      child2 (zoom: 3)      <div>child3-rendered</div>      <div>        child3-not-rendered      </div>    </div>  </div></div>

<pre></pre>

#log {  height: 95px;  overflow: scroll;  margin: 10px;  border: 1px solid black;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

The JavaScript code logs the zoom value applied at each level along with itscurrentCSSZoom value.

if ("currentCSSZoom" in Element.prototype) {  const parent = document.querySelector("#parent");  log(`parent (unzoomed). currentCSSZoom: ${parent.currentCSSZoom}`);  const child1 = document.querySelector("#child1");  log(`child1 (zoom: 2). currentCSSZoom: ${child1.currentCSSZoom}`);  const child2 = document.querySelector("#child2");  log(`child2 (zoom: 2). currentCSSZoom: ${child2.currentCSSZoom}`);  const child3Rendered = document.querySelector("#child3-rendered");  log(    `child3-rendered (unzoomed). currentCSSZoom: ${child3Rendered.currentCSSZoom}`,  );  const child3NotRendered = document.querySelector("#child3-not-rendered");  log(    `child3-not-rendered (not rendered): ${child3NotRendered.currentCSSZoom}`,  );} else {  log("Element.currentCSSZoom not supported in this browser");}

The resulting rendered<div> structure and log are shown below.First note that the parent, child1 and child2 have zoom levels 1, 2, and 3, respectively, and render at 1, 2 and 6 times the size of the parent text.This is reflected by the loggedcurrentCSSZoom values.

The<div> with idchild3-rendered does not havezoom set but inherits thecurrentCSSZoom value of 6 as shown in the log.The final<div> is not rendered and therefore has acurrentCSSZoom value of 1.

Specifications

Browser compatibility

See also

• CSSzoom