Element: currentCSSZoom property - Web APIs | MDN
Value
A number indicating the effective CSS zoom on the element, or 1 if the element is not rendered.
Examples
This example demonstrates how the currentCSSZoom is calculated.
First we define a nested structure of <div> elements where the "parent" is unzoomed and contains a nested element "child1" that has zoom: 2 applied, which in turn contains a nested element "child2" with zoom: 3 applied.
The "child2" element contains two nested elements, one of which is not rendered, and neither of which have the zoom property applied.
html
<div id="parent">
parent
<div style="zoom: 2" id="child1">
child1 (zoom: 2)
<div style="zoom: 3" id="child2">
child2 (zoom: 3)
<div id="child3-rendered">child3-rendered</div>
<div style="display: none" id="child3-not-rendered">
child3-not-rendered
</div>
</div>
</div>
</div>
#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 its currentCSSZoom value.
js
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 logged currentCSSZoom values.
The <div> with id child3-rendered does not have zoom set but inherits the currentCSSZoom value of 6 as shown in the log.
The final <div> is not rendered and therefore has a currentCSSZoom value of 1.
Specifications
| Specification |
|---|
| CSSOM View Module # dom-element-currentcsszoom |