【发布时间】：2012-11-19 21:31:21
【问题描述】：
我正在尝试找到一种方法来监视/观察 DOM 元素上的偏移量/宽度/高度以捕捉任何变化。但是，如果另一个元素移动了被监视的元素或调整了它的大小，我还需要捕捉对元素的任何更改。例如。被监视对象上方的 DOM 元素增长，并占用更多空间，导致被监视元素偏移量移动。
Example to demonstrate what I need to watch/monitor
我已经使用计时器实现了它，但是回调/观察器会好很多。
我已经找到了几种方法来观察特定元素的变化，但这需要监控整个 DOM 的变化，这并不理想。
显示如何监视/观察特定项目更改的解决方案将无济于事，因为它们依赖于该特定项目的属性/CSS 更改。 不起作用的示例： jQuery CSS Property Monitoring Another watch tool
我认为 MutationObserver 可能会起作用，但我还没有让它起作用。
如果有人有想法，请赐教！
2013 年 10 月 14 日更新：请参阅我自己的答案以获得解决方案。
【问题讨论】：
-
到目前为止，您对
MutationObserver进行了哪些尝试，因为这应该在属性更改时触发。它可能无法让您完全到达那里，但它可能会有所帮助 - 除非它不会触发样式更改。我自己并没有真正检查过。 -
好的，刚刚检查过，
MutationObservers会触发样式属性更改（至少在 FireFox 中）.. 但它不会告诉您更改了哪个属性。还是有用的。但是，如果其他元素（或窗口）改变尺寸，这将无助于做出反应。为此，您肯定需要一个间隔/超时检查器和一个窗口调整大小事件侦听器......除非有人知道允许您连接到用户代理渲染过程的 js 方法？ -
我遇到的问题完全相同。很容易捕获可能影响另一个项目的偏移量的内联样式更改，但是如果 dom 中的类更改会更改要观看的项目的偏移量，
MutationObserver只会告诉一个类已添加。我想我会添加一个突变观察者来捕捉任何变化，然后做一个手册if offset.top != old_offset.top。至少比使用计时器要好。
标签： javascript jquery html dom