最新的Web開發教程
 

HTML DOM offsetWidth Propery

<元素對象

例

得到的高度和寬度<div>元素，包括填充和邊框：

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

TXT的結果將是：

Height with padding and border: 280px
Width with padding and border: 430px
試一試»

更多"Try it Yourself"下面的例子。

定義和用法

的offsetWidth屬性返回元素的以像素為單位，包括填充，邊界和滾動條的可視寬度，而不是幅度。

為什麼原因"viewable"指定字，是因為如果該元素的含量比元素的實際寬度，此屬性將只返回寬度是可見的(See "More Examples")

注意：要了解這個屬性，你必須了解CSS盒模型 。

提示：該屬性通常與一起使用的offsetHeight屬性。

提示：使用clientHeight和clientWidth屬性返回一個元素的可視高度和寬度，僅包括填充。

提示：要滾動條添加到一個元素，使用CSS 溢出財產。

此屬性為只讀。

瀏覽器支持

屬性
offsetWidth 是 是 是 是 是

句法

element .offsetWidth

技術細節

返回值： 一個數字，代表的元件的以像素為單位的寬度可見，包括填充，邊界和滾動條
例子

更多示例

例

該實施例證明clientHeight / clientWidth和的offsetHeight / offsetWidth之間的差：

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

TXT的結果將是：

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
試一試»

例

這個例子演示了clientHeight / clientWidth和的offsetHeight / offsetWidth之間的區別，當我們添加一個滾動條的元素：

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

TXT的結果將是：

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
試一試»

<元素對象