JavaScript Element offsetWidth 属性

• 

  JavaScript Element offsetWidth 属性

  offsetWidth属性返回元素的可视宽度（以像素为单位），包括填充，边框和滚动条，但不包括边距。指定“viewable”单词的原因是因为如果元素的内容高于元素的实际宽度，则此属性将仅返回可见的宽度（请参阅“更多示例”）。此属性是只读的。

  注意：要了解此属性，您必须了解CSS Box模型。

  提示：此属性通常与offsetHeight属性一起使用 。

  提示：使用clientHeight和clientWidth属性返回元素的可查看高度和宽度，仅包括填充。

  提示：要将滚动条添加到元素，请使用CSS overflow属性。

  实例：

  获取<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";
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  offsetWidth	支持	支持	支持	支持	支持

• 

  语法

  element.offsetWidth
• 

  技术细节

  项目	描述
  返回值：	一个数字，表示元素的可视宽度（以像素为单位），包括填充，边框和滚动条
  DOM版本	Core Level 2

• 

  更多例子

  此示例演示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";
  

  尝试一下

  此示例演示了当我们向元素添加滚动条时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";
  

  尝试一下