JS/jQuery如何获取CSS设为height:0的元素真实高度？

这种情况我太熟了——当元素被强行设为height:0时，常规的offsetHeight或者clientHeight肯定只会返回0，毕竟浏览器是严格按照CSS规则渲染的。之前试过的方法有偏差，大概率是没处理好元素的隐藏状态或者布局依赖，我给你几个亲测靠谱的思路：

1. 临时修改样式获取高度（最常用） #

核心思路是临时解除height:0的限制，同时不让元素影响页面布局，获取高度后再还原样式：

function getRealHeight(element) {
  // 保存元素原有行内样式，方便后续还原
  const originalStyle = element.getAttribute('style');
  
  // 临时修改样式：解除高度限制+脱离文档流+隐藏可见性
  element.style.height = 'auto';
  element.style.visibility = 'hidden';
  element.style.position = 'absolute';
  
  // 获取真实高度（offsetHeight包含padding和border）
  const realHeight = element.offsetHeight;
  
  // 还原原有样式，避免破坏页面布局
  element.setAttribute('style', originalStyle || '');
  
  return realHeight;
}

注意：如果元素原本就有position或visibility的自定义样式，一定要通过保存的originalStyle还原，不然会影响页面原有布局。

2. 克隆元素到视野外计算高度 #

如果元素依赖父级样式（比如继承的字体、padding），临时修改自身样式可能有偏差，这时候克隆元素是更稳妥的选择：

function getRealHeight(element) {
  // 克隆完全一样的元素（包括子元素和样式）
  const clone = element.cloneNode(true);
  
  // 解除高度限制，同时把克隆元素放到页面视野外
  clone.style.height = 'auto';
  clone.style.position = 'absolute';
  clone.style.left = '-9999px';
  clone.style.top = '-9999px';
  
  // 把克隆元素添加到文档中才能计算高度
  document.body.appendChild(clone);
  
  // 获取克隆元素的真实高度
  const realHeight = clone.offsetHeight;
  
  // 用完就删掉克隆元素，避免冗余DOM
  document.body.removeChild(clone);
  
  return realHeight;
}

提醒：如果元素有动态绑定的事件或者异步加载的内容，克隆时需要额外处理，但纯布局高度的场景下这个方法几乎不会有偏差。

3. 利用scrollHeight快速获取（适合简单场景） #

如果元素只是设置了height:0+overflow:hidden，但子元素本身是可见的，scrollHeight会直接返回内容的实际高度（包括被隐藏的部分）：

const realHeight = element.scrollHeight;

如果之前用这个方法有偏差，大概率是没考虑box-sizing或内边距的影响，可以结合getComputedStyle修正：

const style = getComputedStyle(element);
const paddingTop = parseInt(style.paddingTop);
const paddingBottom = parseInt(style.paddingBottom);
// 减去上下内边距，得到内容本身的高度
const realContentHeight = element.scrollHeight - paddingTop - paddingBottom;

• 确认元素的子元素没有被display:none或visibility:hidden，如果子元素本身不可见，获取的高度肯定不对；
• 检查元素是否设置了box-sizing:border-box，如果是，计算高度时要注意border和padding的影响；
• 如果元素内容是异步加载的，要等内容完全渲染后再获取高度，可以把代码放到requestAnimationFrame或DOMContentLoaded事件里。

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