如何可靠地检测 DIV 元素尺寸变化？

检测 DIV 元素的尺寸变化

当浏览器窗口大小调整时，您在检测 DIV 元素的尺寸变化时遇到了困难。此问题探讨了此问题的可能解决方案。

jQuery 调整大小事件绑定

您将回调函数绑定到 DIV 上的 jQuery 调整大小事件的初始方法是不正确的。 resize 事件仅在窗口大小调整时触发，而 DIV 尺寸变化时不会触发。

解决方案：Resize Observer API

较新的解决方案是 Resize Observer API，具有良好的浏览器支持。此 API 允许您观察元素尺寸的变化：

const observer = new ResizeObserver((entries) => {
  // Code to handle dimension changes
});

observer.observe(targetElement);

在提供的 HTML 示例中，您可以使用 Resize Observer API，如下所示：

const textbox = document.getElementById('textbox');
const width = document.getElementById('width');
const height = document.getElementById('height');

const observer = new ResizeObserver(() => {
  width.value = textbox.offsetWidth;
  height.value = textbox.offsetHeight;
});

observer.observe(textbox);

此代码当文本框的尺寸发生变化时，将更新宽度和高度输出。

以上是如何可靠地检测 DIV 元素尺寸变化？的详细内容。更多信息请关注PHP中文网其他相关文章！