Easy Tutorial
❮ Jsref Max Dom Obj Ins ❯

HTML DOM offsetWidth Property

Element Object

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

Element Object

❮ Jsref Max Dom Obj Ins ❯