HTML DOM 元素 offsetHeight
示例
显示 "myDIV" 的高度和宽度，包括内边距和边框
const elmnt = document.getElementById("myDIV");
let text = "带内边距和边框的高度: " + elmnt.offsetHeight + "px<br>";
text += "带内边距和边框的宽度: " + elmnt.offsetWidth + "px";
自己动手试一试 »
更多示例见下文。
描述
offsetHeight 属性返回元素的可见高度（以像素为单位），包括内边距、边框和滚动条，但不包括外边距。
offsetHeight 属性是只读的。
教程
offsetParent
所有块级元素都报告相对于 offset 父级的偏移量
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
offset 父级是最近的、position 属性不为 static 的祖先元素。
如果不存在 offset 父级，则偏移量相对于文档主体。
另请参阅
语法
element.offsetHeight
返回值
| 类型 | 描述 |
| Number | 元素的可见高度（以像素为单位），包括内边距、边框和滚动条。 |
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";
自己动手试一试 »
浏览器支持
element.offsetHeight 在所有浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
