求助：使用jQuery获取元素高度始终返回0的问题

我来帮你排查下这个问题——你尝试用height()、outerHeight()、scrollHeight、innerHeight()这些方法获取#inclusions2的高度都返回0，大概率是下面几个常见原因导致的，对应解决办法如下：

1. 代码执行时机过早，元素还没完成渲染 #

如果你的高度获取代码在DOM完全加载前就执行了，此时#inclusions2还没被浏览器渲染到页面上，自然拿不到正确高度。

解决办法：把代码包裹在$(document).ready()里（确保DOM结构加载完成），如果元素内包含图片等需要加载的资源，就用$(window).load()（等待所有资源加载完毕）：

// DOM结构加载完成后执行
$(document).ready(function() {
    console.log($('#inclusions2').height());
});

// 或等待所有资源（图片、样式等）加载完成后执行
$(window).on('load', function() {
    console.log($('#inclusions2').height());
});

2. 元素（或其父级）处于隐藏状态（display: none） #

从你的代码示例看，这是个tab标签页里的元素——默认未激活的tab通常会被设置为display: none，而浏览器不会为隐藏元素计算布局高度，所以所有高度方法都会返回0。

解决办法：

• 临时显示元素获取高度后再恢复隐藏：

  const $tab = $('#inclusions2');
  // 临时显示元素（用visibility:hidden不影响页面布局）
  $tab.css({ visibility: 'hidden', display: 'block' });
  const actualHeight = $tab.height();
  // 恢复原状态
  $tab.css({ visibility: 'visible', display: 'none' });
  console.log(actualHeight);
  

• 如果是使用Bootstrap这类框架的tab组件，监听tab切换完成的事件，在元素显示后再获取高度：

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      // 获取当前激活的tab容器
      const activeTab = $(e.target).attr('href');
      console.log($(activeTab).height());
  });
  

3. 元素内容是动态加载的 #

如果#inclusions2里的内容是通过AJAX、异步请求等方式动态插入的，那你在内容加载完成前获取高度，得到的就是空容器的高度（0）。

解决办法：在动态内容加载完成的回调函数里执行高度获取逻辑，比如AJAX请求的示例：

$.ajax({
    url: '你的内容接口地址',
    success: function(data) {
        // 插入动态内容
        $('#inclusions2').html(data);
        // 内容加载完成后再获取高度
        console.log($('#inclusions2').height());
    }
});

你可以先排查下你的#inclusions2是不是处于隐藏状态，这是tab场景下最常见的问题~

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