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
支持 支持 支持 支持 支持 支持