最新的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
试一试»

<元素对象