是否可以使用 MutationObserver 观察 HTML 元素的 offsetTop 属性

RB.*_*RB. 3 html mutation-observers

在 HTML 页面中,可以出于多种原因重新定位元素 - 元素的样式更改(边距、填充、高度等),其他元素的插入或删除,或其他元素的样式更改。

我需要确保 jQuery 对话框始终位于锚点旁边,因此如果锚点移动,对话框也会移动。但是,我不控制对话框显示的页面(我动态注入了一些 JS)。我认为我可以使用 MutationObserver 观察元素(及其所有父元素)的 offsetTop 属性的变化,但 offsetTop 的变化似乎不会引发突变事件。

有人可以确认 offsetTop 更改不会引发突变事件,或者告诉我如何观察偏移顶部?

或者,如果有其他一些技术可以确保对话框与其锚点保持一致,我全都听从了 - 但请注意我不控制页面本身,只控制对话框的约束:)

小提琴:

在下面的小提琴中,单击“Margin”按钮会修改锚元素的 margin-top,导致style属性发生变化,从而触发重新定位。但是,单击其他按钮不会导致重新定位,即使 offsetTop 属性已更改。我需要另外两个按钮来position()调用该函数。

http://jsfiddle.net/ustmssx7/2/

约束

我不控制 HTML 或 Javascript - 我的 JS 被注入到其他人的页面中,所以我能做的非常有限。

倒退

我的后备解决方案是window.anchor.offsetTop每 100 毫秒左右轮询一次,并在它发生变化时重新定位。然而,投票很糟糕,所以如果我能对事件做出反应,那会好得多。

log*_*yth 5

offsetTop无法观察,MutationObserver因为只能观察到HTML 结构的变化。所以在页面的实际 HTML 中可见的任何 HTML 数据。

对于您的示例,您真正想要的是观察页面的整个结构,因为任何数量的事情都会影响弹出窗口的位置,并且在对页面进行任何更改时,您都需要重新定位您的弹出。请记住,仍然有一些方法可以在不修改页面 HTML 的情况下修改页面的呈现状态,例如 CSS 动画和悬停效果等。使用这种类型的解决方案无法解决这些问题。