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	是	是	是	是	是

技術細節(jié)

更多實例

此示例演示clientWidth和offsetWidth之間的區(qū)別：

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