Получение ширины элемента после изменения его высоты

Question

Мне необходимо сразу после того как элементу задана высота, получить его computed ширину.

Вариант с event transitionend. В CSS файле 'transition: height 1ms' есть. По какой-то причине 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);
        }

Answer 1

Вы можете следить за изменениями ваших элементов при помощи 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>

БЛОГ НА HUSL

Получение ширины элемента после изменения его высоты

Ответы (1 шт):