在前端开发中，我们经常会使用 offsetHeight 属性来获取元素的高度。但是，在实际应用中，你可能会发现 offsetHeight 的值和自己手动获取元素高度的值不一致。那么，它们之间有什么差异呢？本文将详细介绍它们之间的区别，并提供示例代码以帮助读者更好地理解。
什么是 offsetHeight？
在开始深入探讨 offsetHeight 和自己之间的差异之前，我们需要先了解 offsetHeight 是什么。简单来说，offsetHeight 是一个只读属性，可以返回元素的像素高度，包括元素的高度、垂直内边距和边框，但不包括外边距和水平线框。以下是一个示例代码：
<div id="myDiv" style="height:50px; padding:10px; border:2px solid black;"></div>
<script>
const div = document.getElementById('myDiv');
console.log(div.offsetHeight); // 输出64
</script>在上面的示例代码中，我们创建了一个 div 元素，设置其高度为 50 像素，向内添加了 10 像素的内边距和 2 像素的边框。然后，我们使用 offsetHeight 属性获取该元素的高度，输出的值为 64 像素。
虽然 offsetHeight 属性可以返回元素的像素高度，但是它与手动获取元素高度的值之间存在一些差异。具体来说，offsetHeight 比手动获取的元素高度值要大，这是由于以下几个因素造成的：
1. 边框和内边距尺寸的计算方式不同
当我们手动获取元素高度时，只会获取元素内容的高度，而不包括边框和内边距。但是，offsetHeight 属性会将元素的边框和内边距也计算在内。这意味着，如果你使用了 box-sizing: border-box; 样式规则来指定盒模型的计算方式，offsetHeight 将不再包括外边距。以下是一个示例代码：
<div id="myDiv" style="height:50px; padding:10px; border:2px solid black; box-sizing:border-box;"></div>
<script>
const div = document.getElementById('myDiv');
console.log(div.offsetHeight); // 输出50
</script>在上面的示例代码中，我们添加了 box-sizing: border-box; 样式规则以指定盒模型的计算方式。此时，offsetHeight 只会包括元素内容的高度和边框的高度，不包括内边距和外边距。因此，输出的值为 50 像素。
2. offsetHeight 包括隐藏元素的高度
如果一个元素设置为 display:none; 或者被其父元素隐藏，手动获取它的高度会返回 0。但是，offsetHeight 属性会将这些元素的高度也计算在内。以下是一个示例代码：
-- -------------------- ---- -------
---- ----------- ----------------------
---- ---------- ---------------------------
------
--------
----- --- - ---------------------------------
------------------------------ -- ----
------------------------------ -- ---
---------在上面的示例代码中，我们创建了一个父元素并将其设置为 display:none;，然后在其中添加一个子元素并设置其
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10991
