Element: currentCSSZoom-Eigenschaft

Die currentCSSZoom schreibgeschützte Eigenschaft der Element-Schnittstelle gibt den "effektiven" CSS-zoom eines Elements an. Dabei wird der Zoom berücksichtigt, der auf das Element und alle seine übergeordneten Elemente angewendet wird.

Der Wert wird berechnet, indem die CSS-zoom-Werte des Elements und all seiner übergeordneten Elemente multipliziert werden. Wenn beispielsweise drei Elemente mit Zoom-Werten von 2, 1.5 und 3 ineinander verschachtelt sind, hat das tiefst verschachtelte Element einen currentCSSZoom-Wert von 9. Wenn das Element keine CSS-Box hat, zum Beispiel weil display: none auf das Element oder eines seiner übergeordneten Elemente gesetzt ist, wird currentCSSZoom auf 1 gesetzt.

Beachten Sie, dass einige Methoden, wie Element.getBoundingClientRect(), Dimensionen und Positionen im Verhältnis zum Viewport zurückgeben und daher die Effekte des CSS-zoom berücksichtigen. Andere Eigenschaften und Methoden geben Werte zurück, die relativ zum Element selbst sind und die Zoom-Effekte nicht beinhalten. Dazu gehören beispielsweise client*-Eigenschaften wie Element.clientHeight, scroll*()-Methoden wie Element.scroll() und offset*-Eigenschaften wie HTMLElement.offsetHeight. Die Eigenschaft currentCSSZoom kann verwendet werden, um diese Werte zu skalieren und die Effekte des Zoomens zu berücksichtigen.

Wert

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

Beispiele

Dieses Beispiel zeigt, wie das currentCSSZoom berechnet wird.

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

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>

Der JavaScript-Code protokolliert den angewendeten Zoom-Wert auf jeder Ebene zusammen mit seinem currentCSSZoom-Wert.

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 top_child3_rendered = document.querySelector("#child3_rendered");
  log(
    `child3_rendered (unzoomed). currentCSSZoom: ${child3_rendered.currentCSSZoom}`,
  );
  const top_child3_notRendered = document.querySelector("#child3_not-rendered");
  log(
    `child3_notRendered (not rendered): ${child3_notRendered.currentCSSZoom}`,
  );
} else {
  log("Element.currentCSSZoom not supported in this browser");
}

Die resultierende gerenderte <div>-Struktur und das Protokoll werden unten gezeigt. Beachten Sie zuerst, dass das Elternelement, child1 und child2 Zoom-Stufen von 1, 2 und 3 haben und beim 1-, 2- und 6-fachen der Größe des Elternelement-Texts rendern. Dies spiegelt sich in den protokollierten currentCSSZoom-Werten wider.

Das <div> mit der ID child3_rendered hat kein zoom gesetzt, aber erbt den currentCSSZoom-Wert von 6, wie im Protokoll gezeigt. Das letzte <div> wird nicht gerendert und hat daher einen currentCSSZoom-Wert von 1.

Spezifikationen

Specification
CSSOM View Module
# dom-element-currentcsszoom

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
currentCSSZoom

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch