HTML DOM Element offsetHeight attribute

Definition and Usage

offsetHeight The attribute returns the visible height of the element (in pixels), including padding, border, and scrollbars, but not including margin.

offsetHeight The attribute is read-only.

See also:CSS Box Model Tutorial

offsetParent

All block-level elements report offsets relative to the offset parent:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Offset parent refers to the nearest ancestor with a non-static position.

If there is no offset parent, the offset is relative to the main text of the document.

See also:

offsetWidth attribute

offsetParent attribute

offsetTop attribute

offsetLeft attribute

clientTop attribute

clientLeft attribute

clientWidth attribute

clientHeight attribute

Instance

Example 1

Display the height and width of "myDIV", including padding and border:

const elmnt = document.getElementById("myDIV");
text = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Selbst ausprobieren

Beispiel 2

Unterschiede zwischen clientHeight/clientWidth und offsetHeight/offsetWidth

Mit Scrollleiste:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Selbst ausprobieren

Keine Scrollleiste:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Selbst ausprobieren

Syntax

element.offsetHeight

Rückgabewert

Typ Beschreibung
Zahl Die sichtbare Höhe des Elements (in Pixeln) einschließlich Innenabstand, Rand und Scrollbalken.

Browserunterstützung

Alle Browser unterstützen dies element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung