HTML DOM Element offsetWidth
Example
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 »
More examples below.
Definition and Usage
The offsetWidth property returns the viewable width of an element (in pixels)
including padding, border and scrollbar, but not the margin.
The offsetWidth property is read-only.
Tutorial:
The offsetParent
All block-level elements report offsets relative to the offset parent:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
The offset parent is the nearest ancestor that has a position other than static.
If no offset parent exists, the offset is relative to the document body.
See Also:
Syntax
element.offsetWidth
Return Value
| Type | Description |
| Number | The viewable width of an element (in pixels) including padding, border and scrollbar. |
The Difference between
clientHeight/clientWidth and offsetHeight/offsetWidth
Without a 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 a 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 »
Browser Support
element.offsetWidth is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
