HTML DOM 元素 clientWidth
示例
获取 "myDIV" 的高度和宽度，包括内边距
const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";
自己试试 »
下面还有更多示例。
描述
<code class="w3-codespan">clientWidth</code> 属性以像素为单位返回元素的可视宽度，包括内边距，但不包括边框、滚动条或外边距。
<code class="w3-codespan">clientWidth</code> 属性是只读的。
教程
另请参阅
要为元素添加滚动条，请使用 CSS <a href="/cssref/pr_pos_overflow.asp">overflow</a> 属性。
语法
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";
自己试试 »
有滚动条
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";
自己试试 »
浏览器支持
<code class="w3-codespan">element.clientWidth</code> 在所有浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
