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

Question

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

我可以为许多事件挂钩事件处理程序，但我认为有些案例没有涵盖。我曾希望使用MutationObservers来观察元素的offsetWidth或clientWidth，但看起来它们只适用于DOM属性，而不是Node属性（或者可能就是Webkit所实现的）。所以，要真正做到防弹，看起来我还是需要运行一个轮询循环。

这是对的吗？我错过了重要的事吗？轮询唯一的防弹方式来检测元素的大小或位置何时发生变化？

修改

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

1. 收听window.resize
2. 挂钩您编写的任何可能更改DOM的代码（或者可能使用Mutation Events或Mutation Observers）
3. 定期轮询操作以清除任何遗漏的案件

（大多数人停在1，可能会做2）

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

顺便说一句，在我的WebGL情况下，监听window.resize就足够了（并且稍微有点优选，因为那时画布尺寸和渲染分辨率会同时发生变化）。

Answer 1

你可以用CSS动画做到这一点。查看http://developer.streak.com/2012/11/how-to-detect-dom-changes-in-css.html和类似内容。我想它不会处理你所有的要求，现在我已经读完了它。

Answer 2

一位同事向我指了一个使用technique和underflow事件的overflow。我还没有尝试过，我不知道有什么样的浏览器支持（看起来像Chrome和FireFox，它应该在IE中通过合成浏览器所需的相同事件来工作，但我不知道哪个版本支持这项技术）。

Answer 3

截至2019年，您可以访问：

• ResizeObserver在尺寸更改时触发回调。这里要小心，它是not supported everywhere yet.
• MutationObserver可以用于排名，但是我想这有点过分。 Well supported though。
• IntersectionObserver作为奖励，使您可以检查与祖先的交集。对优化内容特别有用，尤其是在WebGL中。这很漂亮well supported。