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