JavaScript ResizeObserver: отследить размер элемента

ResizeObserver сообщает об изменении размера конкретного элемента, даже если размер поменялся не из-за окна браузера. Это полезно для графиков, панелей и компонентов с адаптивным содержимым.

Рабочий пример

const panel = document.querySelector('#panel');
const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    const width = entry.contentRect.width;
    panel.classList.toggle('compact', width < 420);
  }
});
observer.observe(panel);
// при удалении компонента: observer.disconnect();

Наблюдатель привязан к элементу. Порог ширины является примером: выберите его по фактическому поведению компонента.

Частый вопрос

Чем ResizeObserver отличается от window.resize?

window.resize относится к окну. ResizeObserver отслеживает размер выбранного элемента и реагирует также на изменения layout внутри страницы.