Middle

Jak uzyskać szerokość elementu DOM i śledzić jej zmiany? Czy można przypiąć resize do elementu DOM za pomocą addEventListener?

sobes.tech AI

Odpowiedź od AI

Чтобы получить ширину DOM-элемента, можно использовать свойство offsetWidth или getBoundingClientRect().width:

const element = document.getElementById('myElement');
const width = element.offsetWidth;
// или
const widthRect = element.getBoundingClientRect().width;

Для отслеживания изменений ширины элемента нельзя напрямую повесить событие resize через addEventListener, так как событие resize доступно только на объекте window.

Вместо этого используют ResizeObserver — современный API, который позволяет отслеживать изменения размеров элементов:

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Новая ширина:', entry.contentRect.width);
  }
});
resizeObserver.observe(element);

Таким образом, ResizeObserver — правильный способ отслеживать изменения размеров DOM-элемента.

Poprzednia Dalej