📅 最后修改于: 2023-12-03 15:01:11.998000 🧑 作者: Mango
offsetHeight 属性是 HTML DOM 中的一个属性，用于获取包括元素的边框、内边距和水平滚动条在内的整个元素的高度。
elementNode.offsetHeight
其中，elementNode 表示一个 HTML 元素对象。
offsetHeight 属性返回一个数字，表示整个元素的高度（单位为像素），包括边框、内边距和水平滚动条在内，但不包括外边距和顶部或底部的边框宽度。
下面的示例演示了如何使用 offsetHeight 属性来获取网页中特定元素的总高度：
<!DOCTYPE html>
<html>
<head>
<title>使用 offsetHeight 属性获取元素高度</title>
<style>
#myDiv {
border: 1px solid black;
padding: 10px;
height: 200px;
overflow-y: scroll;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="myDiv">
<p>这是一段文本。</p>
<p>这是另一段文本。</p>
<p>这是第三段文本。</p>
<p>这是第四段文本。</p>
<p>这是第五段文本。</p>
<p>这是第六段文本。</p>
<p>这是第七段文本。</p>
<p>这是第八段文本。</p>
<p>这是第九段文本。</p>
<p>这是第十段文本。</p>
<p>这是第十一段文本。</p>
<p>这是第十二段文本。</p>
<p>这是第十三段文本。</p>
<p>这是第十四段文本。</p>
<p>这是第十五段文本。</p>
<p>这是第十六段文本。</p>
<p>这是第十七段文本。</p>
<p>这是第十八段文本。</p>
<p>这是第十九段文本。</p>
<p>这是第二十段文本。</p>
</div>
<script>
var myDiv = document.getElementById("myDiv");
var height = myDiv.offsetHeight;
console.log("myDiv 的高度为：" + height + "px");
</script>
</body>
</html>
在上面的例子中，我们创建了一个名为 myDiv 的 div 元素，并将其高度设置为 200px，并增加了边框和 padding。我们还将 overflow-y 属性设置为 scroll，以便在内容高度超过元素高度时显示滚动条。
我们使用 document.getElementById() 方法获取 myDiv 元素，并将其存储在 myDiv 变量中。之后，我们使用 myDiv.offsetHeight 属性获取 myDiv 元素的总高度，并将其存储在 height 变量中。最后，我们将 height 变量的值输出到控制台中，以便检查它是否正确。
offsetHeight 属性的值通常是一个整数，但是如果元素中存在子元素的高度小于 1px，它可能会返回一个小数（浮点数）。height 属性设置为 auto，则 offsetHeight 属性返回的是元素的实际高度（例如，如果元素包含了一个图片，offsetHeight 属性将返回图片的高度）。display:none;，则 offsetHeight 属性将返回 0。offsetHeight 属性是只读属性，不能修改元素的高度。如果需要设置元素的高度，应该使用 CSS 样式表或 JavaScript 动态修改元素的样式。