HTMLElement.offsetHeight — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLElement.offsetHeight

Beschreibung

offsetHeight ist eine schreibgeschützte Eigenschaft und gibt die Layout-Höhe eines Elements in CSS-Pixeln zurück. Der Wert setzt sich zusammen aus der Inhaltshöhe, dem vertikalen padding, den oberen und unteren Rahmenbreiten (border) und, falls vorhanden, der Höhe einer horizontalen Scrollleiste. Der Außenabstand (margin) sowie Pseudo-Elemente wie ::before und ::after zählen nicht dazu, sofern sie nicht den Inhalt vergrößern.

Die Eigenschaft eignet sich gut, um die tatsächlich belegte Höhe eines Elements zu messen, etwa für Aufklapp-Animationen, eigene Scroll-Logik, virtuelles Scrollen oder um Tooltips und Popover zu positionieren. Ist das Element oder einer seiner Vorfahren per display: none ausgeblendet, liefert offsetHeight den Wert 0.

Wichtig: Der Wert wird auf eine Ganzzahl gerundet. Brauchst du Nachkommastellen oder die Höhe nach CSS-Transformationen (transform: scale()), verwende getBoundingClientRect(). Für die Höhe ohne Rahmen und Scrollleiste gibt es clientHeight, für die gesamte scrollbare Inhaltshöhe scrollHeight.

Rückgabewert

Typ

number

Beschreibung

Ganzzahlige Höhe in CSS-Pixeln (Inhalt + padding + border + ggf. horizontale Scrollleiste). 0, wenn das Element nicht gerendert wird (z. B. display: none oder nicht im DOM).

Beispiele

Höhe eines Elements mit Padding und Rahmen messen

const box = document.createElement('div');
Object.assign(box.style, {
  height: '100px',
  padding: '10px',
  border: '5px solid black',
  margin: '20px',
  boxSizing: 'content-box'
});
document.body.append(box);

// 100 (Inhalt) + 2*10 (padding) + 2*5 (border) = 130; margin zählt nicht
console.log(box.offsetHeight);
console.log(box.clientHeight); // ohne Rahmen

130 120

Aufklapp-Animation mit gemessener Zielhöhe

const panel = document.querySelector('.accordion-panel');

const expand = () => {
  panel.style.height = 'auto';
  const targetHeight = panel.offsetHeight; // natürliche Höhe messen
  panel.style.height = '0px';
  panel.offsetHeight; // Reflow erzwingen, damit die Transition startet
  panel.style.transition = 'height 300ms ease';
  panel.style.height = `${targetHeight}px`;
};

document.querySelector('.accordion-toggle')
  .addEventListener('click', expand);

Sichtbarkeit prüfen und Höhenänderungen beobachten

const header = document.querySelector('header');

// 0 bei display:none (auch wenn ein Vorfahr ausgeblendet ist)
const isRendered = (el) => el.offsetHeight > 0 || el.getClientRects().length > 0;
console.log('Header sichtbar:', isRendered(header));

// Sticky-Header: Abstand für den Inhalt dynamisch setzen
const observer = new ResizeObserver(() => {
  document.body.style.paddingTop = `${header.offsetHeight}px`;
});
observer.observe(header);

Header sichtbar: true

// Wichtig · Fallstricke

Rundung: Der Wert ist immer eine Ganzzahl. Bei Höhen wie 100.6px erhältst du 101. Für genaue Werte nimm getBoundingClientRect().height.
Transformationen: transform (z. B. scale(0.5)) wird nicht berücksichtigt, offsetHeight gibt die Layout-Höhe vor der Transformation zurück.
Performance: Das Lesen von offsetHeight erzwingt ein synchrones Layout (Reflow). Wechselst du in Schleifen zwischen Schreiben von Styles und Lesen von offsetHeight, kommt es zu „Layout Thrashing“. Lies daher erst gebündelt alle Werte und schreib danach, oder nimm ResizeObserver.
Ausgeblendete Elemente: Bei display: none oder nicht eingehängten Elementen ist der Wert 0. visibility: hidden liefert dagegen die normale Höhe.
Nur HTMLElement: SVG-Elemente haben keine offsetHeight. Verwende dort getBBox() oder getBoundingClientRect().
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird stillschweigend ignoriert, im Strict Mode gibt es einen TypeError.
Kompatibilität: wird von allen modernen Browsern seit vielen Jahren unterstützt.

Siehe auch

HTMLElement.offsetLeft HTMLElement.offsetParent HTMLElement.offsetWidth HTMLElement.offsetTop HTMLElement.outerText