Javascript - 如何检测元素的 offsetTop 变化？

Question

如何检测元素的offsetTop变化？以及其他元素的属性..

这是一个片段，我尝试在测试的 div 上放置一个 MutationObserver，但是当我制作标题 div 时，观察者永远不会被触发> 上面更大(通过在其中写入一些文本)。

// get the test element
var testElement = document.getElementById('test');
// build the observer
var observer = new MutationObserver(function(mutations) {
  console.log("Observer triggered! YES!!");
})
// place it, listen to attributes and datas changes
.observe(testElement, {
  attributes: true,
  characterData: true,
});


// --- test ---
console.log("The test div is at " + testElement.offsetTop + "px from the top.");
console.log("Writting in the header div (to make it bigger)..");

document.getElementById("header").innerText = "Header text changed";

console.log("The test div is at " + testElement.offsetTop + "px from the top after header text changed.");

<div id="header"></div>
<div id="test"></div>

Answer 1

除了使用令人​​讨厌的杆子，或者只是点击元素来检查其位置之外，没有简单的方法可以做到这一点。

有这个博客:Jquery Plug-in

它为 IE 和 Firefox 提供了很好的解决方案，但与 Web Kit 不公平。