HTML DOM Element offsetWidth property

Definition and Usage

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

offsetWidth The property 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 property

offsetParent property

offsetTop property

offsetLeft property

clientTop property

clientLeft property

clientWidth property

clientHeight property

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

Try It Yourself

Example 2

The difference between clientHeight/clientWidth and offsetHeight/offsetWidth

Without Scrollbar:

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

Try It Yourself

With Scrollbar:

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

Try It Yourself

Syntax

element.offsetWidth

Return Value

Type Description
Number The visible width of the element (in pixels), including padding, border, and scrollbar.

Browser Support

All browsers support element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support