28

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

我可以为其中许多事件挂钩事件处理程序,但我认为有些情况没有被涵盖。我曾希望使用 MutationObservers 来观察元素的 offsetWidth 或 clientWidth,但看起来那些只适用于 DOM 属性,而不适用于 Node 属性(或者这可能正是 Webkit 实现的)。所以,要真正做到万无一失,看来我无论如何都需要运行一个轮询循环。

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

编辑

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

  1. 听 window.resize
  2. 挂钩您编写的任何可能更改 DOM 的代码(或者可能使用 Mutation Events 或 Mutation Observers)
  3. 进行定期轮询操作以清理任何遗漏的案例

(大多数人停在1,也许做一点2)

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

顺便说一句,在我的 WebGL 情况下,听 window.resize 就足够了(并且在某种程度上更可取,因为这样画布尺寸和渲染分辨率会同时发生变化)。

4

3 回答 3

9

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

于 2012-12-02T16:55:06.850 回答
3

一位同事向我指出了一种使用溢出事件的技术。我没有尝试过,我不知道有什么样的浏览器支持(看起来像 Chrome 和 FireFox,它应该通过合成浏览器会寻找的相同事件在 IE 中工作,但我不知道哪些版本支持技术)。

于 2013-06-14T21:00:20.887 回答
0

自 2019 年起,您可以访问:

于 2019-05-20T13:17:27.253 回答