HTML DOM clientWidth 属性

HTML DOM Element 对象

clientWidth只读属性返回元素的可视宽度(以像素为单位)，包括填充，但不包括边界，页边距和垂直滚动条（如果存在）。

clientWidth的计算公式如下：CSS width + CSS padding-垂直滚动条的宽度（如果存在）。

要了解此属性，您必须了解CSS Box Model。

使用offsetWidth属性可返回元素的可见宽度，包括填充，边框和垂直滚动条。

语法：

element.clientWidth

var elem = document.querySelector("div");
var txt = "高度包含填充: " + elem.clientHeight + "px<br>";
txt += "宽度包含填充: " + elem.clientWidth + "px";

浏览器兼容性

所有浏览器完全支持clientWidth属性：

属性
clientWidth	是	是	是	是	是

技术细节

更多实例

此示例演示clientWidth和offsetWidth之间的区别：

var elem = document.querySelector("div");
var txt = "宽度包含填充: " + elem.clientWidth + "px<br>";
txt += "宽度包含填充+边框: " + elem.offsetWidth + "px";

相关参考

HTML DOM参考：HTML DOM offsetWidth属性

HTML DOM参考：HTML DOM scrollWidth属性

CSS参考：CSS overflow属性

HTML DOM Element 对象