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

Question

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

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

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

或者，如果还有其他一些技术可以确保对话框与它的锚点保持一致，那么我会全神贯注 - 但请注意我不控制页面本身的约束，只有对话框：）< / p>

FIDDLE ：

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

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

约束

我不控制HTML或Javascript - 我的JS被注入到别人的页面中，所以我对自己能做的事情非常有限。

后备

我的后备解决方案是每100毫秒左右轮询window.anchor.offsetTop，如果更改则重新定位。但是，民意调查很糟糕，所以如果我能对事件作出反应，那就更好了。

Answer 1

使用offsetTop无法观察到{p> MutationObserver，因为只能观察到HTML结构更改。因此，在页面的实际HTML中可以看到任何HTML数据。

对于您的示例，您实际想要的是观察页面的整个结构，因为任何数量的事物都会影响弹出窗口的位置，并且对页面的任何更改，您都需要重新开始你的弹出窗口。请记住，仍然有一些方法可以修改页面的呈现状态而无需修改页面的HTML，如CSS动画和悬停效果等。这种解决方案无法解决这些问题。