HTML DOM clientWidth Property
Element ObjectExample
Get the width of a div element, including padding:
Try it yourself »
Definition and Usage
The clientWidth property is a read-only property that returns the pixel width of the element. The width includes padding, but does not include border, margin, or scrollbar. It is an integer, in pixels (px).
For inline elements and elements without CSS styles, the clientWidth property value is 0.
Note:To understand this property, seeCSS Box Model。
Tip:This property is usually used with theclientHeightproperty together.
Tip:Use the offsetHeightandoffsettWidthproperty to return the visible height and width of an element, including padding and border.
Tip:To add a scrollbar to an element, you can use theoverflowproperty.
This is a read-only property.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| clientWidth | Yes | Yes | Yes | Yes | Yes |
Syntax
element.clientWidth
Technical Details
| Return Value: | Returns an integer representing the pixel width of the element. |
|---|
More Examples
Example
The following example demonstrates the difference between the clientHeight/clientWidth and offsetHeight/offsetWidth properties:
Try it yourself »
Example
The following example demonstrates the difference between the clientHeight/clientWidth and offsetHeight/offsetWidth properties after adding a scrollbar to the element:
Try it yourself »
Other Extensions