HTML DOM 元素 offsetHeight

示例

显示"myDIV"的高度和宽度，包括内边距和边框：

const elmnt = document.getElementById("myDIV");
let text = "Height with padding and border: " + elmnt.offsetHeight + "px ";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

亲自试一试 »

下面有更多示例。

描述

这个offsetHeight属性返回元素的可视高度（以像素为单位），包括填充、边框和滚动条，但不包括边距。

这个offsetHeight属性 ID 只读。

教程：

CSS 盒子模型

偏移父级

所有块级元素报告相对于偏移父级的偏移量：

顶部偏移
向左偏移
偏移宽度
偏移高度

偏移父级是具有非静态位置的最近祖先。

如果不存在偏移父级，则偏移量是相对于文档正文的。

也可以看看：

语法

element.offsetHeight

返回值

类型	描述
数字	元素的可视高度（以像素为单位），包括内边距、边框和滚动条。

clientHeight/clientWidth 和 offsetHeight/offsetWidth 之间的区别

没有滚动条：

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px ";
text += "Height with padding and border: " + elmnt.offsetHeight + "px ";
text += "Width with padding: " + elmnt.clientWidth + "px ";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

亲自试一试 »

带滚动条：

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px ";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px ";
text += "Width with padding: " + elmnt.clientWidth + "px ";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

亲自试一试 »

浏览器支持

element.offsetHeight所有浏览器都支持：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes