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 上檢視此頁面 • 報告此內容的問題