元素：currentCSSZoom 属性

currentCSSZoom 是 Element 接口的只读属性，它提供元素的“有效”CSS zoom，考虑了应用于元素及其所有父元素的缩放。

元素及其所有父元素的 CSS zoom 值相乘计算出的值。例如，如果三个元素的 zoom 值分别为 2、1.5 和 3，并且彼此嵌套，则嵌套最深的元素的 currentCSSZoom 值将为 9。如果元素没有 CSS 盒子，例如由于在元素或其父元素上设置了 display: none，则 currentCSSZoom 设置为 1。

请注意，某些方法（例如 Element.getBoundingClientRect()）返回相对于视口（viewport）的尺寸和位置，因此包含 CSS zoom 的影响。其他属性和方法返回相对于元素本身的值，不包括缩放的影响。例如，这些包括 client* 属性（如 Element.clientHeight）、scroll*() 方法（如 Element.scroll()) 和 offset* 属性（如 HTMLElement.offsetHeight）。currentCSSZoom 属性可用于缩放这些值以调整缩放的影响。

值

一个数字，指示元素上有效的 CSS 缩放比例，如果元素未渲染则为 1。

示例

此示例演示如何计算 currentCSSZoom。

首先，我们定义了一个嵌套的 <div> 元素结构，其中“父元素”未缩放，并包含一个嵌套的“child1”元素，该元素应用了 zoom: 2，而“child1”又包含一个嵌套的“child2”元素，应用了 zoom: 3。“child2”元素包含两个嵌套元素，其中一个未渲染，并且这两个元素均未应用 zoom 属性。

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_notrendered">
        child3_notrendered
      </div>
    </div>
  </div>
</div>

<pre id="log"></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;
}

JavaScript 代码记录了每个级别应用的缩放值及其 currentCSSZoom 值。

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_notrendered");
  log(
    `child3_notrendered (not rendered): ${child3_notrendered.currentCSSZoom}`,
  );
} else {
  log("Element.currentCSSZoom not supported in this browser");
}

下面显示了生成的 <div> 结构和日志。首先请注意，父元素、child1 和 child2 的缩放级别分别为 1、2 和 3，并且渲染大小分别是父元素文本的 1 倍、2 倍和 6 倍。这反映在记录的 currentCSSZoom 值中。

ID 为 child3_rendered 的 <div> 未设置 zoom，但继承了日志中显示的 6 的 currentCSSZoom 值。最后一个 <div> 未渲染，因此其 currentCSSZoom 值为 1。

规范

规范
CSSOM 视图模块 # dom-element-currentcsszoom

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

CSS zoom