javascript - 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化？

Question

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

我可以为其中许多事件 Hook 事件处理程序，但我认为有些情况没有涵盖。我本来希望使用 MutationObservers 来监视元素的 offsetWidth 或 clientWidth，但看起来这些仅适用于 DOM 属性，而不适用于 Node 属性(或者也许这正是 Webkit 实现的)。因此，为了真正做到万无一失，看来我无论如何都需要运行轮询循环。

这是正确的吗？我是不是错过了什么重要的事情？轮询是检测元素大小或位置何时发生变化的唯一万无一失的方法吗？

编辑

为了提供更多背景信息，这与任何特定用例无关。对我来说，它一次又一次地出现。在我目前的情况下，我希望有一个 Canvas ，通过 CSS 设置为其父级的 100% 宽度和高度。我想要一个脚本在其 offsetWidth 或 clientWidth 更改时调整 Canvas 的宽度和高度属性(这是针对 WebGL，其中宽度和高度属性影响帧缓冲区分辨率)。在另一个项目中，我想让一个元素扩展高度以填充用户浏览器窗口中的任何剩余空间。我一次又一次地遇到这种情况，不可避免地，解决方案似乎是:

1. 监听 window.resize
2. Hook 您编写的任何可能更改 DOM 的代码(或者可能使用突变事件或突变观察器)
3. 定期进行轮询以清理任何遗漏的案例

(大多数人停在 1 处，也许会做一点 2)

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

顺便说一句，在我的 WebGL 情况下，监听 window.resize 就足够了(而且更可取，因为这样 Canvas 尺寸和渲染分辨率会同时改变)。

Answer 1

您可以使用 CSS 动画来做到这一点。查看http://developer.streak.com/2012/11/how-to-detect-dom-changes-in-css.html和类似的。我想它不能满足您的所有要求，现在我又仔细阅读了它。