HTML DOM Element clientWidth 属性

定义和用法

clientWidth 属性返回元素的可视宽度，包括内边距，但不包括边框、滚动条或外边距，以像素计。

clientWidth 属性是只读的。

请参阅：CSS 框模型教程

另请参阅：

clientHeight 属性

clientTop 属性

clientLeft 属性

offsetHeight 属性

offsetWidth 属性

如需将滚动条添加到元素，请使用 CSS overflow 属性。

实例

例子 1

获取 "myDIV" 的高度和宽度，包括内边距：

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

亲自试一试

例子 2

例子 2：clientHeight/clientWidth 与 offsetHeight/offsetWidth 的差别

无滚动条：

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";

亲自试一试

有滚动条：

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";

亲自试一试

语法

element.clientWidth

返回值

类型 描述
数值 元素的可视宽度（以像素计），包括内边距。

浏览器支持

所有浏览器都支持 element.clientWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持