Элемент: свойство currentCSSZoom

Свойство currentCSSZoom только для чтения интерфейса Element предоставляет «эффективное» значение CSS zoom элемента, учитывая масштабирование, применённое к элементу и всем его родительским элементам.

Значение вычисляется путём умножения значений CSS zoom элемента и всех его родителей. Например, если три элемента со значениями zoom 2, 1.5 и 3 вложены друг в друга, то значение zoom самого вложенного элемента будет равно 9. Если у элемента нет CSS-ящика, например, потому что display: none установлено для элемента или одного из его родителей, то значение zoom устанавливается в 1.

Обратите внимание, что некоторые методы, такие как Element.getBoundingClientRect(), возвращают размеры и положение, относительные к области просмотра, и, следовательно, включают эффекты CSS zoom. Другие свойства и методы возвращают значения, относительные к самому элементу, и не включают эффекты масштабирования. К ним относятся, например, свойства client* такие как Element.clientHeight, методы scroll*() такие как Element.scroll(), и свойства offset* такие как HTMLElement.offsetHeight. Свойство currentCSSZoom можно использовать для масштабирования этих значений, чтобы скорректировать эффекты масштабирования.

Число, указывающее эффективное значение CSS zoom для элемента, или 1, если элемент не отрисовывается.

Этот пример демонстрирует, как вычисляется значение currentCSSZoom.

Сначала мы определяем вложенную структуру элементов <div>, где «родитель» не масштабирован, и содержит вложенный элемент «child1», которому применено zoom: 2, который в свою очередь содержит вложенный элемент «child2» с применённым zoom: 3. Элемент «child2» содержит два вложенных элемента, ни один из которых не отрисовывается, и ни одному из которых не применено свойство zoom.

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

Код JavaScript регистрирует значение zoom, применённое на каждом уровне, а также его значение 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> и журнал. Сначала обратите внимание, что родитель, child1 и child2 имеют значения zoom 1, 2 и 3 соответственно, и отображаются в 1, 2 и 6 раз больше размера родительского текста. Это отражено в зарегистрированных значениях currentCSSZoom.

Элемент <div> с id child3_rendered не имеет zoom установленного, но наследует значение zoom 6, как показано в журнале. Конечный элемент <div> не отрисовывается и, следовательно, имеет значение zoom 1.

• CSS zoom