DiecurrentCSSZoom read-only-Eigenschaft desElement Interface liefert den "effektiven"CSS-zoom eines Elements, indem sie den Zoom berücksichtigt, der auf das Element und all seine Elternelemente angewendet wird.

Der Wert wird berechnet, indem die CSS-zoom-Werte des Elements und all seiner Eltern multipliziert werden.Zum Beispiel, wenn drei Elemente mit Zoom-Werten von 2, 1,5 und 3 ineinander verschachtelt sind, wird das am tiefsten verschachtelte Element einencurrentCSSZoom-Wert von 9 haben.Falls das Element keine CSS-Box hat, beispielsweise weildisplay: none auf das Element oder eines seiner Elternteile gesetzt ist, wird dercurrentCSSZoom auf 1 gesetzt.

Beachten Sie, dass einige Methoden, wie zum BeispielElement.getBoundingClientRect(), Dimensionen und Positionen relativen zum Viewport zurückgeben und daher die Effekte von CSSzoom beinhalten.Andere Eigenschaften und Methoden geben Werte zurück, die relativ zum Element selbst sind und die Effekte des Zoomens nicht beinhalten.Dazu gehören beispielsweiseclient*-Eigenschaften wieElement.clientHeight,scroll*()-Methoden wieElement.scroll(), undoffset*-Eigenschaften wieHTMLElement.offsetHeight.DiecurrentCSSZoom-Eigenschaft kann verwendet werden, um diese Werte anzupassen, um den Effekten des Zoomens Rechnung zu tragen.

Wert

Eine Zahl, die den effektiven CSS-Zoom auf dem Element angibt, oder 1, falls das Element nicht gerendert wird.

Beispiele

Dieses Beispiel demonstriert, wie dercurrentCSSZoom berechnet wird.

Zuerst definieren wir eine verschachtelte Struktur von<div>-Elementen, bei der das "Elternteil" nicht gezoomt ist und ein verschachteltes Element "child1" enthält, auf daszoom: 2 angewendet wurde, welches wiederum ein verschachteltes Element "child2" mitzoom: 3 enthält.Das "child2"-Element enthält zwei verschachtelte Elemente, von denen eines nicht gerendert wird, und keines von denen die Zoom-Eigenschaft angewendet hat.

<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;}

Der JavaScript-Code protokolliert den auf jede Ebene angewendeten Zoom-Wert zusammen mit seinemcurrentCSSZoom-Wert.

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");}

Die resultierende gerenderte<div>-Struktur und das Protokoll sind unten zu sehen.Zuerst beachten Sie, dass Elternteil, child1 und child2 Zoom-Stufen von 1, 2 und 3 haben und mit 1, 2 und 6-facher Größe des Elterntextes gerendert werden.Dies spiegelt sich in den protokolliertencurrentCSSZoom-Werten wider.

Das<div> mit der IDchild3-rendered hat keinenzoom-Wert, erbt aber dencurrentCSSZoom-Wert von 6, wie im Protokoll gezeigt.Das letzte<div> wird nicht gerendert und hat daher einencurrentCSSZoom-Wert von 1.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSSzoom