HTML DOM offsetWidth property

HTML DOM Element Object

offsetWidthA read-only property that returns the width of the element as an integer, including horizontal padding and borders.

Generally, the offsetWidth element is the pixel measurement of the CSS width, including any borders, padding, and vertical scrollbars (if any). It does not include the width of pseudo-elements, such as::beforeor::after.

To understand this property, you must understandCSS Box Model.

is usedclientHeightandclientWidthThe property returns the visible height and width of the element, including padding, but not including borders, margins, and scrollbars (if any).

Syntax:

element.offsetWidth

var elem = document.querySelector("div");
var txt = "Height including padding and border: "　+　elem.offsetHeight　+　"px<br>";
txt　+Width including padding and border: "　+　elem.offsetWidth　+　"px";

Browser Compatibility

All browsers fully support the offsetWidth property:

Technical Details

More Examples

This example demonstrates the difference between clientWidth and offsetWidth:

var elem = document.querySelector("div");
var txt = "Width includes padding: "　+　elem.clientWidth　+　"px<br>";
txt　+="Width includes padding"　+　border: ""　+　elem.offsetWidth　+　"px";

Related References

HTML DOM Reference:offsetHeight property

HTML DOM Reference:offsetLeft property

HTML DOM Reference:offsetTop property

HTML DOM Reference:offsetParent property

HTML DOM Element Object