# offsetWidth property

The `offsetWidth` property contains the full width of an element (includes the actual element width, border width, padding, scrollbars):

## Syntax

`element.offsetWidth;`

## Example

Let's find out the full size of an element:

`<div id="elem"></div>` `#elem { width: 100px; height: 100px; padding: 15px; border: 10px solid black; }` `let elem = document.querySelector('#elem'); console.log(elem.offsetWidth);`

The code execution result:

`150`

## Example

If an element is hidden, then `offsetWidth` is equal to `0`:

`<div id="elem"></div>` `#elem { display: none; /* hidden element */ width: 100px; height: 100px; padding: 15px; border: 10px solid black; }` `let elem = document.querySelector('#elem'); console.log(elem.offsetWidth);`

The code execution result:

`0`

## See also

- the `clientWidth` property
  that contains the width of an element inside borders
- the `offsetHeight` property
  that contains the full height of an element
- the `getComputedStyle` method
  that obtains the value of an element's CSS property

← →
↑
en ru