jQuery如何获取元素内高度？

这篇文章将为大家详细讲解有关jQuery如何获取元素内高度？，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery 获取元素内高度

简介

jQuery 提供多种方法来获取元素的内高度，即从元素顶部边缘到其内容底部的垂直距离（不包括滚动条）。内高度也被称为内容高度。

方法

1. innerHeight()

innerHeight() 方法返回元素的内高度，单位为像素。

let height = $("#element").innerHeight();

2. height(true)

height() 方法通常用于获取元素的外高度，包括填充和边框。但是，它也可以通过将参数 true 传递来返回内高度。

let height = $("#element").height(true);

注意事项

• innerHeight() 只考虑元素自身的内容，而不考虑子元素。
• height(true) 考虑元素的内容、填充和边框。
• 如果元素隐藏或未在 DOM 中，这些方法将返回 0。
• 滚动条不会计入内高度。

其他方法

除了 innerHeight() 和 height(true)，还有其他方法可以间接获取内高度：

1. offsetHeight

offsetHeight 属性返回元素及其滚动条的高度，单位为像素。但是，它受浏览器窗口大小和其他因素的影响。

let height = $("#element")[0].offsetHeight;

2. getBoundingClientRect()

getBoundingClientRect() 方法返回元素的边界框，其中包括内高度和外高度。

let rect = $("#element")[0].getBoundingClientRect();
let height = rect.height;

选择器

这些方法可以与 jQuery 选择器结合使用，以针对特定元素获取内高度。例如：

let height = $("div.container").innerHeight();

实例

以下是一个实例，演示如何使用 innerHeight() 获取元素的内高度：

<div id="element" style="height: 200px; padding: 10px;">
  <h1>Heading</h1>
  <p>Content...</p>
</div>

let height = $("#element").innerHeight(); // 返回 180px

结论

jQuery 提供多种方法来获取元素的内高度，包括 innerHeight(), height(true) 和其他间接方法。选择最合适的方法取决于特定需求和情况。

以上就是jQuery如何获取元素内高度？的详细内容，更多请关注编程网其它相关文章！