如何在jQuery中获取未设置height样式的div实时高度（适配多端）

需求说明 #

需要获取一个未通过CSS设置height样式的div的实时高度，该div内包含长文本，需同时适配电脑端与移动端。

解决方案 #

jQuery提供了三个核心方法来获取元素的实时高度，可根据需求选择对应方法：

• height()：获取元素的内容高度（不含内边距、边框、外边距）
• innerHeight()：获取元素的内容高度+内边距（不含边框、外边距）
• outerHeight()：
  • 默认（无参数）：内容高度+内边距+边框
  • 传true：内容高度+内边距+边框+外边距

如果需要和原生JS的offsetHeight（内容+内边距+边框）对应，直接使用outerHeight()即可。

代码示例 #

短文本场景 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ma_div">
  <span> bla bla bla bla</span>
</div>

<script>
// jQuery 高度获取
const $div = $('#ma_div');
console.log('内容高度：', $div.height());
console.log('内容+内边距：', $div.innerHeight());
console.log('内容+内边距+边框：', $div.outerHeight());
console.log('完整高度（含外边距）：', $div.outerHeight(true));

// 原生JS 对比参考
const div = document.querySelector('#ma_div');
console.log('原生offsetHeight：', div.offsetHeight);
console.log('原生getBoundingClientRect高度：', div.getBoundingClientRect().height);
</script>

长文本场景 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ma_div">
  <span> bla bla bla bla</span>
  <span> bla bla bla bla</span>
  <span> bla bla bla bla</span>
  <span> bla bla bla bla</span>
  <span> bla bla bla bla</span>
  <span> bla bla bla bla</span>
  <span> bla bla bla bla</span>
</div>

<script>
const $div = $('#ma_div');
console.log('实时内容高度：', $div.height());
console.log('实时完整高度（含边框）：', $div.outerHeight());
</script>

适配窗口变化 #

如果需要在窗口大小改变（比如移动端旋转屏幕、PC端缩放窗口）时实时更新高度，可结合resize事件：

$(window).resize(function() {
  const currentHeight = $('#ma_div').height();
  console.log('窗口变化后的实时高度：', currentHeight);
});

注意事项 #

• 确保元素已完成渲染再获取高度，建议将代码放在$(document).ready()回调中，或者页面底部（</body>前），避免获取到0值。

内容的提问来源于stack exchange，提问作者jacques