主页 / 问题 / 1400661
Accepted
Владимир Говоров
Asked:2022-06-16 06:43:19 +0000 UTC2022-06-16 06:43:19 +0000 UTC

更改高度后获取元素的宽度

  • 772

我需要在元素被赋予高度后立即获得计算的宽度。

带有事件转换结束的变体。CSS 文件具有“过渡：高度 1 毫秒”。出于某种原因，getComputedStyle 有时会给出 0px

        const someElems = [elem1, elem2, elem3, elem4];
        let arrWidth: string[] = [];
        for (const element of someElems) {
            element.addEventListener("transitionend", () => arrWidth.push(window.getComputedStyle(element).width) );
            //после изменения высоты, обработчик события не запускается
            element.style.height = heightRow;
        }

未找到解决方案。仅适用于人为创建的延迟。getComputed 每次都返回正确的值。

        const someElems = [elem1, elem2, elem3, elem4];
        const height = "350px"
        let arrWidth: string[] = [];
        for (const element of someElems) {
            element.addEventListener("transitionend", () => arrWidth.push(window.getComputedStyle(element).width) );
            setTimeout(() => {
                element.style.height = height;
            }, 1000);
        }
javascript promise

1 个回答

  1. Best Answer

    您可以使用 ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver观察您的元素变化 

      let div = document.querySelector('div');
  let btn = document.querySelector('button');
  btn.addEventListener("click", () => div.style.height = '120px');

  const ro = new ResizeObserver(entries => {
      entries.forEach(entry => {
          console.log(entry.contentBoxSize);
      });
  })

  ro.observe(div);
    div {  
  height: 70px;
  aspect-ratio: 2/1;  
  border: 1px solid #ddd;
  display: inline-block;
}

button {
  display: inline-block;
}
    <div>
  тест тест тест тест тест тест тест
</div>

<button>изменить</button>

    • 2

相关问题