Angular中如何获取隐藏div的实际宽度？

这问题我做Angular项目时也踩过坑！当div处于display: none状态时，浏览器不会为它计算布局尺寸，所以用getBoundingClientRect()或者getComputedStyle()拿到的都是0。下面给你几个实用的解决办法：

方法一：临时修改样式让元素“隐形渲染” #

核心思路是让元素在浏览器中完成布局计算，但用户看不到它。我们可以临时修改元素的样式，计算完尺寸后再恢复原样式：

EventTriggerMethod(myDiv: HTMLElement) {
  // 保存元素原本的样式，方便后续恢复
  const originalStyles = {
    position: myDiv.style.position,
    visibility: myDiv.style.visibility,
    left: myDiv.style.left,
    display: myDiv.style.display
  };

  // 临时调整样式：让元素渲染但不可见且不占用页面空间
  myDiv.style.position = 'absolute';
  myDiv.style.visibility = 'hidden';
  myDiv.style.left = '-9999px';
  myDiv.style.display = 'block'; // 如果原div是display:none，强制改为block

  // 现在可以获取真实宽度了
  const actualWidth = myDiv.getBoundingClientRect().width;
  console.log('div实际宽度:', actualWidth);

  // 恢复元素原本的样式
  Object.assign(myDiv.style, originalStyles);

  // 执行你原本的显示逻辑
  myDiv.style.display = 'block'; // 替换成你实际的显示方式
}

方法二：克隆元素到页面外计算 #

如果不想修改原元素的样式，可以克隆一个相同的元素，把它放到视口外计算尺寸，之后再销毁克隆体：

EventTriggerMethod(myDiv: HTMLElement) {
  // 克隆目标div（包含所有样式和内容）
  const divClone = myDiv.cloneNode(true) as HTMLElement;

  // 设置克隆元素的样式，确保它渲染但不干扰页面
  divClone.style.position = 'absolute';
  divClone.style.left = '-9999px';
  divClone.style.visibility = 'hidden';
  divClone.style.display = 'block';

  // 将克隆元素添加到页面中
  document.body.appendChild(divClone);

  // 获取真实宽度
  const actualWidth = divClone.getBoundingClientRect().width;
  console.log('div实际宽度:', actualWidth);

  // 移除克隆元素，清理页面
  document.body.removeChild(divClone);

  // 显示原div
  myDiv.style.display = 'block';
}

补充说明 #

• 为什么display: none拿不到尺寸？因为浏览器对display: none的元素不会进行布局渲染，自然没有尺寸数据。
• visibility: hidden和opacity: 0的元素会正常参与布局，所以能拿到真实尺寸，但前者会保留元素的占位空间，后者完全透明，我们结合position: absolute和left: -9999px可以让元素不占用页面空间。

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