JavaScript无法获取DOM元素实际宽高，请求技术解决方案

我用JavaScript获取某个DOM元素的宽高时，offsetHeight、clientHeight、getBoundingClientRect()都返回0，getComputedStyle返回auto；但在控制台查看getComputedStyle时，能看到元素实际高度是350。这个元素没通过JS设置固定高度，包含多个子元素，其中一个子元素的min-height是通过dotCMS API请求获取的。我推测是DOM还没渲染完成就执行了获取代码，下面是我尝试的代码和控制台输出，求解决办法。

尝试的代码 #

const el = this.domElement.querySelector('.element');
console.log('el ', el);
console.log('offsetHeight ', el.offsetHeight);
console.log('clientHeight ', el.clientHeight);
console.log('clientHeight ', el.clientHeight);
console.log('getBoundingClientRect().height ', el.getBoundingClientRect());
const style = getComputedStyle(el);
console.log('style height: ', style.height);
const ht = window.getComputedStyle(el).getPropertyValue('height');
console.log('ht ', ht);

控制台输出 #

el  div.element
index.js:74 offsetHeight  0
index.js:75 clientHeight  0
index.js:76 clientHeight  0
index.js:77 getBoundingClientRect().height  DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
index.js:80 style height:  auto
index.js:82 ht  auto

解决办法 #

• 等待API请求完成后执行逻辑
  子元素的min-height依赖dotCMS API返回值，所以必须确保API请求完成、子元素样式更新后再获取高度。把获取高度的代码放在API请求的回调、then()块或者await之后即可。

• 用MutationObserver监听元素变化
  如果不确定API完成时机，可以通过MutationObserver监听目标元素或其子元素的样式、内容变化，一旦元素高度非0就停止监听并获取值：

  const el = this.domElement.querySelector('.element');
  const observer = new MutationObserver(() => {
    const height = el.offsetHeight;
    if (height > 0) {
      console.log('元素高度:', height);
      observer.disconnect();
    }
  });
  observer.observe(el, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['style']
  });
  

• 用requestAnimationFrame轮询检测
  利用浏览器渲染帧循环，轮询元素高度直到获取到有效值：

  const el = this.domElement.querySelector('.element');
  function checkHeight() {
    const height = el.offsetHeight;
    if (height > 0) {
      console.log('元素高度:', height);
    } else {
      requestAnimationFrame(checkHeight);
    }
  }
  checkHeight();
  

• 确保代码在DOM完全加载后执行
  如果是页面初始化阶段的问题，把代码放在DOMContentLoaded事件回调中，或者确保元素已经挂载到DOM树后再执行：

  document.addEventListener('DOMContentLoaded', () => {
    // 此处执行获取高度的逻辑
  });
  

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