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 对象