HTML DOM offsetWidth
Property
Example
Get the width of a div element, including padding and border:
Definition and Usage
The offsetWidth
property is a read-only property that returns the width of the element in pixels, including padding and border, but not margin. It returns an integer value in pixels.
Typically, an element's offsetWidth
is a measurement of the element's CSS width, including the element's border, padding, and the horizontal scrollbar (if present and rendered), but it does not include the width of pseudo-elements like :before
or :after
.
For the document's body object, it includes the linear sum of the CSS width of the replaced element. The width of the downward-extending content of floating elements is ignored.
If the element is hidden (for example, if the element or one of its ancestors has style.display
set to none
), it returns 0.
Note: To understand this property, refer to the CSS Box Model.
Tip: This property is often used together with the offsetHeight property.
Tip: Use the clientHeight and clientWidth properties to return the visible height and width of an element, including padding.
Tip: To add a scrollbar to an element, use the overflow property.
This is a read-only property.
Browser Support
Property | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
Syntax
element.offsetWidth
Technical Details
| Return Value: | Returns an integer representing the width of the element in pixels. | | --- | --- |
More Examples
Example
The following example demonstrates the difference between clientHeight/clientWidth
and offsetHeight/offsetWidth
properties:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";
txt += "Height including padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";
txt += "Width including padding and border: " + elmnt.offsetWidth + "px";
Example
The following example demonstrates the difference between clientHeight/clientWidth
and offsetHeight/offsetWidth
properties after adding a scrollbar to the element:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "<b>Style information of the div:</b><br>";
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";
txt += "Height including padding, border, and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";
txt += "Width including padding, border, and scrollbar: " + elmnt.offsetWidth + "px";