YouTipHTML DOM clientWidth Property |
-- Learning not just technology, but dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
JavaScript Reference
JavaScript Objects
- JavaScript Array Object
- JavaScript Boolean Object
- JavaScript Date Object
- JavaScript Math Object
- JavaScript Number Object
- JavaScript String Object
- JavaScript RegExp Object
- JavaScript Global Properties/Functions
- JavaScript Operators
- JavaScript Error
Browser Objects
DOM Objects
- HTML DOM Document Object
- HTML DOM Element Object
- HTML DOM Attribute Object
- HTML DOM Event Object
- HTML DOM Console Object
- CSSStyleDeclaration Object
- DOM HTMLCollection
HTML Objects
- <a>
- <area>
- <audio>
- <base>
- <blockquote>
- <body>
- <button>
- <canvas>
- <col>
- <colgroup>
- <datalist>
- <del>
- <details>
- <dialog>
- <embed>
- <fieldset>
- <form>
- <iframe>
- <frameset >
- <img>
- <ins>
- <input> - button
- <input> - checkbox
- <input> - color
- <input> - date
- <input> - datetime
- <input> - datetime-local
- <input> - email
- <input> - file
- <input> - hidden
- <input> - image
- <input> - month
- <input> - number
- <input> - range
- <input> - password
- <input> - radio
- <input> - reset
- <input> - search
- <input> - submit
- <input> - text
- <input> - time
- <input> - url
- <input> - week
- <keygen>
- <link>
- <label>
- <legend>
- <li>
- <map>
- <menu>
- <menuItem>
- <meta>
- <meter>
- <object>
- <ol>
- <optgroup>
- <option>
- <param>
- <progress>
- <q>
- <script>
- <select>
- <source>
- <style>
- <table>
- <td>
- <th>
- <tr>
- <textarea>
- <title>
- <time>
- <track>
- <video>
HTML DOM clientWidth Property
Example
Get the width of a div element, including padding:
var elmnt = document.getElementById("myDIV");
var txt = "div element height, including padding: " + elmnt.clientHeight + "px<br>";
txt += "div element width, including padding: " + elmnt.clientWidth + "px";Definition and Usage
The clientWidth property is a read-only property that returns the width of an element in pixels. The width includes padding, but does not include border, margin, or scrollbar. It returns an integer, in pixels (px).
The clientWidth property of inline elements and elements without CSS styles is 0.
Note: To understand this property, see the CSS Box Model.
Tip: This property is often used together with the clientHeight property.
Tip: Use the offsetHeight and offsetWidth properties to return the visible height and width of an element, including padding and border.
Tip: To add a scrollbar to an element, use the overflow property.
This is a read-only property.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| clientWidth | Yes | Yes | Yes | Yes | Yes |
Syntax
element.clientWidthTechnical 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 clientHeight/clientWidth after adding a scrollbar to an element:
(Note: The original tutorial content for this example appears to be cut off in the provided source.)