Element: currentCSSZoom 属性

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

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

该值通过将元素及其所有父元素的 CSS zoom 值相乘来计算。例如，如果三个具有缩放值 2、1.5 和 3 的元素嵌套在一起，那么最内层嵌套的元素的 currentCSSZoom 值将为 9。如果元素没有 CSS 盒子（例如，因为元素或其父元素设置了 display: none），则 currentCSSZoom 设置为 1。

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

值

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

示例

本示例演示了 currentCSSZoom 的计算方法。

首先，我们定义了一个嵌套的 <div> 元素结构，其中“父元素”未缩放，包含一个嵌套的“子元素1”，该元素应用了 zoom: 2，而“子元素1”又包含一个嵌套的“子元素2”，该元素应用了 zoom: 3。“子元素2”包含两个嵌套元素，其中一个未渲染，并且两者都没有应用 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_not-rendered">
        child3_not-rendered
      </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_not-rendered");
  log(
    `child3_notRendered (not rendered): ${child3_notRendered.currentCSSZoom}`,
  );
} else {
  log("Element.currentCSSZoom not supported in this browser");
}

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

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

规范

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

浏览器兼容性

另见

CSS zoom

帮助改进 MDN

了解如何贡献

本页面最后修改于 2024年10月16日，由 MDN 贡献者编辑。

在 GitHub 上查看此页面 • 报告此内容的问题