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