HTML DOM Element offsetWidth attribute

Definition and Usage

offsetWidth The attribute returns the visible width of the element (in pixels), including padding, border, and scrollbar, but not including margin.

offsetWidth 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 body of the document.

See also:

offsetHeight attribute

offsetParent attribute

offsetTop attribute

offsetLeft attribute

clientTop attribute

clientLeft attribute

clientWidth attribute

clientHeight attribute

Instance

Example 1

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

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

Selbst ausprobieren

Beispiel 2

Unterschied zwischen clientHeight/clientWidth und offsetHeight/offsetWidth

Ohne Scrollbalken:

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

Mit Scrollbalken:

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

Rückgabewert

Typ Beschreibung
Zahl Die sichtbare Breite des Elements (in Pixeln), einschließlich Innenabstand, Rahmen und Scrollbalken.

Browserkompatibilität

Alle Browser unterstützen dies element.offsetWidth:

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