观察元素的大小变化

Question

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

---

我必须观察元素的大小变化。我试图通过在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>

单击红色框记录大小。然后按下按钮。什么也不会发生。如果您再次单击该框，它仍将显示旧的大小。为什么这不起作用?

Answer 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>

Answer 2

微软的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。