Element.currentCSSZoom — Eigenschaft · JavaScript-Referenz

Signatur

Element.currentCSSZoom

Beschreibung

Die schreibgeschützte Eigenschaft currentCSSZoom gibt als Zahl an, wie stark ein Element durch die CSS-Eigenschaft zoom insgesamt vergrößert oder verkleinert wird. Dabei werden die zoom-Werte des Elements selbst und aller Elternelemente miteinander multipliziert. Hat etwa ein Container zoom: 2 und ein Kindelement darin zoom: 1.5, liefert das Kindelement den Wert 3.

Nützlich ist die Eigenschaft immer dann, wenn man zwischen gezoomten und ungezoomten Koordinaten umrechnen muss – etwa bei Drag-and-Drop, eigenen Tooltips, Canvas-Overlays oder Messungen mit getBoundingClientRect(). Mit getComputedStyle() erhält man nur den lokalen zoom-Wert eines einzelnen Elements, nicht aber den geerbten Gesamtfaktor – genau diese Lücke schließt currentCSSZoom.

Wird ein Element nicht gerendert (z. B. display: none oder nicht im Dokument eingehängt), liefert die Eigenschaft 1. Der Browser-Zoom des Nutzers (Strg/Cmd + Plus) fließt nicht ein; dieser spiegelt sich stattdessen in window.devicePixelRatio wider.

Rückgabewert

Typ

number

Beschreibung

Der effektive Zoomfaktor als Gleitkommazahl (z. B. 1, 2, 0.75). Bei nicht gerenderten Elementen 1.

Beispiele

Verschachtelten Zoom auslesen

// HTML: <div id="outer" style="zoom: 2"><p id="inner" style="zoom: 1.5">Text</p></div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');

console.log(outer.currentCSSZoom); // nur eigener Zoom
console.log(inner.currentCSSZoom); // 2 * 1.5
console.log(getComputedStyle(inner).zoom); // nur lokaler Wert

2 3 1.5

Nicht gerenderte Elemente liefern 1

const box = document.createElement('div');
box.style.zoom = '3';
console.log(box.currentCSSZoom); // noch nicht im DOM

document.body.append(box);
console.log(box.currentCSSZoom);

box.style.display = 'none';
console.log(box.currentCSSZoom);

1 3 1

Mausposition in ungezoomte Element-Koordinaten umrechnen

const canvasHost = document.querySelector('#editor');

// Fallback für Browser ohne Unterstützung
const getZoom = (el) => ('currentCSSZoom' in el ? el.currentCSSZoom : 1);

canvasHost.addEventListener('pointerdown', (event) => {
  const rect = canvasHost.getBoundingClientRect();
  const zoom = getZoom(canvasHost);
  // Offset in CSS-Pixeln des (ungezoomten) Element-Inhalts
  const x = (event.clientX - rect.left) / zoom;
  const y = (event.clientY - rect.top) / zoom;
  console.log(`Klick bei x=${x.toFixed(1)}, y=${y.toFixed(1)}`);
});

Klick bei x=120.0, y=45.5

// Wichtig · Fallstricke

Browser-Kompatibilität: Relativ neue Eigenschaft (Chrome/Edge 128, Firefox 126). In älteren Browsern ist sie undefined – per 'currentCSSZoom' in element prüfen und auf 1 zurückfallen.
Nur CSS-zoom: transform: scale() wird nicht berücksichtigt, ebenso wenig der Browser-Zoom des Nutzers (dafür window.devicePixelRatio).
Nicht gerenderte Elemente (display: none, nicht im DOM) liefern immer 1 – das ist kein Hinweis darauf, dass kein Zoom gesetzt ist.
Das Auslesen kann eine Style-Neuberechnung erzwingen; in engen Schleifen oder bei scroll/pointermove den Wert möglichst zwischenspeichern.
Die Eigenschaft ist schreibgeschützt; zum Ändern element.style.zoom setzen.

Siehe auch

Element.getBoundingClientRect() window.getComputedStyle() window.devicePixelRatio HTMLElement.style Element Element.elementTiming ElementInternals.ariaRowCount