在前端开发中，获取元素的呈现高度是一项很常见的任务。本文将介绍几种方法来获得元素的呈现高度，并为每种方法提供适当的示例代码。
1. 使用原生 JavaScript
使用原生 JavaScript 是获取元素高度最基本的方法之一。我们可以使用 offsetHeight 属性来获得元素的高度，如下所示：
const element = document.getElementById('my-element');
const height = element.offsetHeight;
console.log(height);此代码将打印出名为 my-element 的元素的高度。
请注意，offsetHeight 包括元素的高度、内边距和边框，但不包括外边距或水平滚动条（如果有的话）。
2. 使用 jQuery
如果你使用 jQuery，那么你可以很容易地获取元素的高度。可以使用 .height() 方法来获取元素的高度，如下所示：
const height = $('#my-element').height();
console.log(height);类似于 offsetHeight，.height() 方法返回元素的高度，但不包括边框和内边距。另外，这个方法会自动计算隐藏元素的高度。
3. 使用 getComputedStyle
如果你想要完全精确地获取元素的高度，包括边框和内边距，那么你可以使用 getComputedStyle 方法。该方法返回一个包含所有 CSS 样式的对象，你可以从中获取任意属性的值。
下面是如何使用 getComputedStyle 来获取元素高度的示例代码：
const element = document.getElementById('my-element');
const style = window.getComputedStyle(element);
const height = parseInt(style.getPropertyValue('height'));
console.log(height);此示例代码中，我们首先使用 getElementById 来获取元素，然后使用 getComputedStyle 来获取元素的样式。最后，我们使用 getPropertyValue 方法和 'height' 参数来获取元素的高度，并将其解析为整数。
4. 使用 Element.getBoundingClientRect
还有一种方法可以获取元素的高度，即使用 Element.getBoundingClientRect 方法。这个方法返回一个 DOMRect 对象，其中包括元素的位置、大小和其他信息。
以下是如何使用 getBoundingClientRect 来获取元素高度的示例代码：
const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();
const height = rect.height;
console.log(height);请注意，getBoundingClientRect 返回的高度包括元素的内边距和边框，但不包括外边距或水平滚动条（如果有的话）。
结论
以上就是获取元素呈现高度的几种常用方法。使用这些方法，你可以轻松地在前端项目中获取元素的高度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8707