0

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

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

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>

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

4

2 回答 2

3

您是否考虑过使用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>

于 2021-02-19T19:05:08.213 回答
0

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

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

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

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

于 2021-02-19T17:58:26.583 回答