如何检测DIV的尺寸变化？

// 创建一个 ResizeObserver 实例
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Element:', entry.target);
    console.log(`Element size: ${entry.contentRect.width}px x ${entry.contentRect.height}px`);
    console.log(`Element padding: ${entry.contentRect.top}px ; ${entry.contentRect.left}px`);
  }
});

// 开始观察目标元素
const divElement = document.querySelector('#myDiv');
observer.observe(divElement);

// 当不再需要观察时，可以停止观察
// observer.unobserve(divElement);

// 创建一个 MutationObserver 实例
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && (mutation.attributeName === 'style' || mutation.attributeName === 'class')) {
      const divElement = document.querySelector('#myDiv');
      console.log(`Element size: ${divElement.offsetWidth}px x ${divElement.offsetHeight}px`);
    }
  });
});

// 开始观察目标元素
const divElement = document.querySelector('#myDiv');
observer.observe(divElement, { attributes: true });

// 当不再需要观察时，可以停止观察
// observer.disconnect();

window.addEventListener('resize', () => {
  const divElement = document.querySelector('#myDiv');
  console.log(`Element size: ${divElement.offsetWidth}px x ${divElement.offsetHeight}px`);
});

<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

const debouncedObserver = debounce(entries => {
  for (let entry of entries) {
    console.log('Element:', entry.target);
    console.log(`Element size: ${entry.contentRect.width}px x ${entry.content伏Rect.height}px`);
  }
}, 100);

const observer = new ResizeObserver(debouncedObserver);