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属性