HTML DOM clientWidth property

HTML DOM Element Object

clientWidthA read-only property that returns the visible width of an element (in pixels), including padding but not including border, margin, and vertical scrollbar (if it exists).

The calculation formula for clientWidth is as follows: CSS width + CSS padding-the width of the vertical scrollbar (if it exists).

To understand this property, you must understandCSS Box Model.

Usage:offsetWidthThis property can return the visible width of an element, including padding, border, and vertical scrollbar.

Syntax:

element.clientWidth

var elem = document.querySelector("div");
var txt = "Height includes padding: "　+　elem.clientHeight　+　"px<br>";
txt　+= "Width includes padding: "　+　elem.clientWidth　+　"px";

Browser Compatibility

All browsers fully support the clientWidth property:

Technical Details

More Examples

This example demonstrates the difference between clientWidth and offsetWidth:

var elem = document.querySelector("div");
var txt = "Width includes padding: "　+　elem.clientWidth　+　"px<br>";
txt　+=　"Width includes padding"+Border:　"　+　elem.offsetWidth　+　"px";

Related References

HTML DOM Reference:HTML DOM offsetWidth Property

HTML DOM Reference:HTML DOM scrollWidth Property

CSS Reference:CSS overflow Property

HTML DOM Element Object