HTML DOM offsetWidth 屬性

HTML DOM Element 對(duì)象

offsetWidth只讀屬性以整數(shù)形式返回元素的寬度，包括水平填充和邊框。

通常，offsetWidth元素CSS寬度的像素度量，包括任何邊框、填充和垂直滾動(dòng)條(如果有的話(huà))。它不包括偽元素的寬度，例如:: before或:: after。

要了解此屬性，您必須了解CSS Box Model。

使用clientHeight和clientWidth屬性返回元素的可見(jiàn)高度和寬度，包括填充，但不包括邊框，邊距和滾動(dòng)條（如果存在）。

語(yǔ)法：

element.offsetWidth

var elem = document.querySelector("div");
var txt = "Height including padding and border: " + elem.offsetHeight + "px<br>";
txt += "Width including padding and border: " + elem.offsetWidth + "px";

瀏覽器兼容性

所有瀏覽器完全支持offsetWidth屬性：

屬性
offsetWidth	是	是	是	是	是

技術(shù)細(xì)節(jié)

更多示例

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

var elem = document.querySelector("div");
var txt = "Width 包含 padding: " + elem.clientWidth + "px<br>";
txt += "Width 包含 padding + border: " + elem.offsetWidth + "px";

相關(guān)參考

HTML DOM參考：offsetHeight屬性

HTML DOM參考：offsetLeft屬性

HTML DOM參考：offsetTop屬性

HTML DOM參考：offsetParent屬性

HTML DOM Element 對(duì)象