HTML DOM 元素 clientWidth
示例
获取 "myDIV" 的高度和宽度，包括内边距
const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";
自己动手试一试 »
更多示例见下文。
描述
clientWidth 属性返回元素的可见宽度，以像素为单位，包括内边距，但不包括边框、滚动条或外边距。
clientWidth 属性是只读的。
语法
元素.clientWidth
返回值
| 类型 | 描述 |
| Number | 元素的可见宽度（以像素为单位），包括内边距。 |
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 在所有浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
