JavaScript如何不临时设置元素height为auto即可获取其auto模式下的像素高度

原逻辑不需要setTimeout的原因是：修改元素样式后，浏览器默认会将重排操作批量延迟到下一帧执行，同步读取尺寸属性时拿到的是修改前的旧值。你只需要在修改高度为auto后，主动触发一次同步布局计算，即可立刻拿到最新高度，无任何延迟：

<script>
window.addEventListener('resize', function() {
   var one = document.getElementById("one");
   one.style.height = 'auto';
   // 主动触发同步重排，强制浏览器立即计算最新高度
   void one.clientHeight;
   if (window.innerHeight > one.clientHeight ) {
      one.style.height = '100vh';
   } else {
      one.style.height = 'auto';
   }
}, true);
</script>

补充优化：可以给resize事件加防抖处理，避免窗口拖动过程中逻辑反复触发，进一步降低性能消耗。

该方案完全不修改原元素的任何样式属性，从根源避免高度闪烁问题，核心逻辑是克隆与原元素布局完全一致的隐藏节点，计算该节点的auto高度即可：

// 通用工具函数：获取元素高度为auto时的实际像素值
function getElementAutoHeight(el) {
  const clone = el.cloneNode(true);
  // 复制影响布局的核心样式，保证计算结果准确
  const computedStyle = window.getComputedStyle(el);
  clone.style.width = computedStyle.width;
  clone.style.padding = computedStyle.padding;
  clone.style.margin = computedStyle.margin;
  clone.style.border = computedStyle.border;
  clone.style.font = computedStyle.font;
  clone.style.lineHeight = computedStyle.lineHeight;
  clone.style.whiteSpace = computedStyle.whiteSpace;
  // 隐藏克隆节点，不影响页面展示
  clone.style.position = 'absolute';
  clone.style.visibility = 'hidden';
  clone.style.pointerEvents = 'none';
  clone.style.top = '-9999px';
  clone.style.left = '-9999px';
  clone.style.height = 'auto';
  // 插入页面计算高度
  document.body.appendChild(clone);
  const autoHeight = clone.clientHeight;
  // 用完移除克隆节点
  document.body.removeChild(clone);
  return autoHeight;
}

// 业务逻辑，完全不需要修改原元素高度
window.addEventListener('resize', function() {
  var one = document.getElementById("one");
  const autoHeight = getElementAutoHeight(one);
  if (window.innerHeight > autoHeight ) {
    one.style.height = '100vh';
  } else {
    one.style.height = 'auto';
  }
}, true);

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