HTML DOM 元素 clientWidth

示例

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

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

亲自试一试 »

下面有更多示例。

描述

这个clientWidth属性返回元素的可视宽度（以像素为单位），包括填充，但不包括边框、滚动条或边距。

这个clientWidth属性是只读的。

教程：

CSS 盒子模型

也可以看看：

要向元素添加滚动条，请使用 CSS溢出属性。

语法

element.clientWidth

返回值

类型	描述
数字	元素的可视宽度（以像素为单位），包括填充。

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

亲自试一试 »

带滚动条：

亲自试一试 »

浏览器支持

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


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes