Как получить ширину DOM-элемента и отслеживать её изменения?

Получение ширины DOM-элемента

В JavaScript существует несколько способов получить ширину DOM-элемента. Самые распространенные — это свойства offsetWidth и clientWidth, а также метод getBoundingClientRect(). offsetWidth возвращает полную ширину элемента, включая padding, border и scrollbar (если есть). clientWidth возвращает ширину только содержимого и padding, без border и scrollbar. Метод getBoundingClientRect() возвращает объект с размерами и позицией элемента относительно viewport, включая ширину (width).

Пример получения ширины

const element = document.getElementById('myElement');
// offsetWidth
console.log(element.offsetWidth); // полная ширина
// clientWidth
console.log(element.clientWidth); // ширина без border
// getBoundingClientRect
const rect = element.getBoundingClientRect();
console.log(rect.width); // ширина с учетом трансформаций

Отслеживание изменений ширины

Для отслеживания изменений ширины элемента используется ResizeObserver. Это современный API, который позволяет наблюдать за изменениями размеров элемента и выполнять колбэк при каждом изменении. Он эффективнее, чем старые методы с polling или событиями resize на window.

Пример с ResizeObserver

const element = document.getElementById('myElement');
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Новая ширина:', entry.contentRect.width);
  }
});
observer.observe(element);
// Отключение наблюдения при необходимости
// observer.disconnect();

Также можно использовать событие resize на window, но оно срабатывает только при изменении размеров окна, а не самого элемента. ResizeObserver работает для любого элемента, независимо от причины изменения размера (CSS, JavaScript, пользовательские действия).

Вывод

Используйте offsetWidth или getBoundingClientRect() для однократного получения ширины, а ResizeObserver — для отслеживания изменений в реальном времени. Это особенно полезно при создании адаптивных компонентов, графиков или элементов, которые должны подстраиваться под контейнер.