The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width. If the element is hidden (for example, by style.display on the element or one of its ancestors to "none"), then 0 is returned.

Syntax

var offsetWidth =element.offsetWidth;

offsetWidth is a read-only property.

This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

 

Example

 

             Image:Dimensions-offset.png

Specification

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'offsetWidth' in that specification.
Working Draft  

Notes

offsetWidth is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box width.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) ? ? ? ?
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) (Yes) ? ? ? ? ? (Yes)

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

See also