Sobes.tech
Middle

Wie erhält man die Breite eines DOM-Elements und verfolgt deren Änderungen? Kann man ein Resize-Event an ein DOM-Element über addEventListener anhängen?

sobes.tech KI

Antwort von 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-элемента.