观察元素的尺寸变化答案

【问题标题】：Observe size change of element观察元素的尺寸变化
【发布时间】：2021-05-22 17:42:37
【问题描述】：

这不是重复的！我对其他答案的结果不满意。如果您仍然认为它是重复的，请在您认为它的原因之前评论它！

我必须观察元素的大小变化。我试图通过在 offsetWidth 属性上创建一个 setter 来做到这一点，如下所示：

const div = document.querySelector("div");

div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));


let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
    get: () => width,
  set: val => {
    width = val;
    div.dispatchEvent(new Event("resize"));
  }
});

document.querySelector("button").onclick = () => div.style.width = "200px";

div {
  background-color: #f00;
  width: 300px;
  height: 300px;
}

<div></div>
<button>
Set size
</button>

点击红框记录大小。然后按下按钮。什么都没发生。如果再次单击该框，它仍将显示旧尺寸。为什么这不起作用？

【问题讨论】：

你考虑过ResizeObserver吗？
你没有设置offsetWidth（它是派生的并且是只读的）所以你的setter永远不会运行。

标签： javascript html resize offsetwidth

【解决方案1】：

您是否考虑过使用ResizeObserver？

// get references to the elements we care about
const div = document.querySelector('.demo');
const button = document.querySelector('button');

// wire the button to resize the div
button.addEventListener('click', () => div.style.width = `${Math.random() * 100}%`);

// set up an observer that just logs the new width
const observer = new ResizeObserver(entries => {
  const e = entries[0]; // should be only one
  console.log(e.contentRect.width);
})

// start listening for size changes
observer.observe(div);

.demo { /* not really relevant. just making it visible. */
  background: skyblue;
  min-height: 50px;
}

<button>Change Size</button>
<div class="demo">Demo</div>

【讨论】：

是的，我正在寻找更多的跨浏览器解决方案。
支持everywhere but IE，还有a polyfill。

【解决方案2】：

Microsoft 的 Internet Explorer 支持所有 HTML 元素上的onresize。在所有其他浏览器中，onresize 仅在 window 对象上可用。 https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

如果您想在所有浏览器中的 div 上使用 onresize，请检查：

http://marcj.github.io/css-element-queries/

该库有一个类ResizeSensor，可用于resize 检测。

【讨论】：