码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM Element clientWidth

❮ Previous ❮ Element Object Reference Next ❯

Example

Get the height and width of "myDIV", including padding:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";
Try it Yourself »

More examples below.

Description

The clientWidth property returns the viewable width of an element in pixels, including padding, but not the border, scrollbar or margin.

The clientWidth property is read-only.

Tutorial:

CSS Box Model

See Also:

The clientHeight Property

The clientTop Property

The clientLeft Property

The offsetHeight Property

The offsetWidth Property

To add scrollbars to an element, use the CSS overflow property.

Syntax

element.clientWidth

Return Value

Type Description
Number The viewable width of an element (in pixels) including padding.

The difference between clientHeight/clientWidth and offsetHeight/offsetWidth

Without a scrollbar:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";
Try it Yourself »

With a scrollbar:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";
Try it Yourself »

Browser Support

element.clientWidth is supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes
❮ Previous ❮ Element Object Reference Next ❯