Javascript 当DOM元素'；s的大小或位置发生了变化？

很长一段时间以来，我一直在寻找一种方法来检测DOM元素的大小或位置何时发生了变化。这可能是因为窗口调整了大小，或者是因为向元素添加了新的子元素，或者是因为在此元素周围添加了新元素，或者是因为CSS规则已更改，或者是因为用户更改了浏览器的字体大小。元素的大小或位置会发生变化的原因有很多

我可以为这些事件中的许多事件挂接事件处理程序，但我认为有些情况没有涵盖。我曾希望使用mutationobserver只监视元素的offsetWidth或clientWidth，但看起来它们只适用于DOM属性，而不适用于节点属性（或者可能这正是Webkit实现的）。所以，要真正做到防弹，看起来我无论如何都需要运行一个轮询循环

这是正确的吗？我错过了什么重要的事情吗？当元素的大小或位置发生变化时，轮询是否是唯一的防弹方法

编辑

为了提供更多的上下文，这与任何一个特定的用例无关。对我来说，它已经一次又一次地出现了。在我目前的情况下，我希望有一个画布，通过CSS设置为其父画布的100%宽度和高度。我需要一个脚本，当画布的offsetWidth或clientWidth更改时，可以调整画布的宽度和高度属性（这适用于WebGL，其中宽度和高度属性会影响帧缓冲区分辨率）。在另一个项目中，我想让一个元素在高度上展开，以填充用户浏览器窗口中的剩余空间。我一次又一次地遇到这种情况，不可避免地，解决办法似乎是：

听window.resize

钩住您编写的任何可能改变DOM的代码（或者可能使用变异事件或变异观察者）

定期进行轮询，以清理任何遗漏的案例

（大多数人在1点停下来，也许会在2点停下来）

我只是想确保我没有错过一些重要的东西

---

顺便说一句，在我的WebGL情况下，听window.resize就足够了（而且更可取，因为画布尺寸和渲染分辨率会同时改变）

您可以使用CSS动画来完成。检查和类似。我想它不能满足您的所有需求，现在我又读了一遍。

一位同事给我指了一个使用and事件的。我还没有尝试过，也不知道浏览器支持哪种类型（看起来像Chrome和FireFox，它应该在IE中工作，通过合成浏览器会寻找的相同事件，但我不知道哪个版本支持该技术）。

自2019年起，您可以访问：

• 在大小更改时触发回调。这里小心点，太危险了
• 这可以用来定位，但我想这有点过分了
• 作为奖励，这允许您检查与祖先的交叉点。对优化内容非常有用，尤其是在WebGL中。这很漂亮

---

标题：否。最后一句：是。你想解决的更大的问题是什么？突变事件只为DOM设计，而不是任何显示属性或类似的东西；Webkit做得很好。我假设在重新加载文档布局时触发事件太关键（性能方面，但也容易出错）。@Matt Ball-很抱歉在最初的问题中没有提供上下文。我已经演了这么久了，所以我知道得更清楚。那是。。。非常聪明。我不认为它在一般情况下对我有帮助，但无论如何我会把它藏在工具箱里。你永远不知道它什么时候会派上用场。谢谢有趣的是，链接到这篇文章的作者也是使用css动画做广告的人。这是他的原帖：如果你需要IE的支持，请阅读作者的更新文章。