HTML DOM 元素 offsetWidth
示例
获取 "myDIV" 的高度和宽度，包括填充和边框
const elmnt = document.getElementById("myDIV");
let text = "带有填充和边框的高度: " + elmnt.offsetHeight + "px<br>";
text += "带有填充和边框的宽度: " + elmnt.offsetWidth + "px";
自己尝试 »
以下还有更多示例。
描述
<code class="w3-codespan">offsetWidth</code> 属性返回元素的可视宽度（以像素为单位），包括填充、边框和滚动条，但不包括边距。
<code class="w3-codespan">offsetWidth</code> 属性是只读的。
教程
offsetParent
所有块级元素报告相对于 offset parent 的偏移量
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
offset parent 是具有非 static 位置的最接近的祖先。
如果不存在 offset parent，则偏移量相对于文档主体。
另请参阅
语法
element.offsetWidth
返回值
| 类型 | 描述 |
| 数字 | 元素的可视宽度（以像素为单位），包括填充、边框和滚动条。 |
之间的区别
clientHeight/clientWidth 和 offsetHeight/offsetWidth
没有滚动条
const elmnt = document.getElementById("myDIV");
let text = "";
text += "带有填充的高度: " + elmnt.clientHeight + "px<br>";
text += "带有填充和边框的高度: " + elmnt.offsetHeight + "px<br>";
text += "带有填充的宽度: " + elmnt.clientWidth + "px<br>";
text += "带有填充和边框的宽度: " + elmnt.offsetWidth + "px";
自己尝试 »
带有滚动条
const elmnt = document.getElementById("myDIV");
let text = "";
text += "带有填充的高度: " + elmnt.clientHeight + "px<br>";
text += "带有填充、边框和滚动条的高度: " + elmnt.offsetHeight + "px<br>";
text += "带有填充的宽度: " + elmnt.clientWidth + "px<br>";
text += "带有填充、边框和滚动条的宽度: " + elmnt.offsetWidth + "px";
自己尝试 »
浏览器支持
<code class="w3-codespan">element.offsetWidth</code> 在所有浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
