使用Javascript跟踪HTML元素上的显示更改

假设我有一个给定的HTML元素，例如：

<div id="foo">...</div>

。。。

在该元素内部，可能会发生很多事情，这些事情会改变该元素的某些显示配置，例如其高度或固定位置

---

我是否可以跟踪与该元素的显示相关的任何更改？元素更改任何显示变量时是否会触发常规事件？

我认为不可能跟踪事件，以下是事件的完整列表：

---

看起来您可能指的是（在可能相关的问题中找到）。正如您可能已经发现的，大多数更改跟踪都是围绕输入元素进行的

---

我以前没有正确使用过这些，所以我不能提供太多关于实现的信息。希望这有帮助

只需使用以下内容：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // Use of the information here.
});

observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

在对

MutationObserver

的调用中，您可以侦听事件并获得在变量突变中更改的元素列表

在

observer.observe的第一个参数中，您可以将元素设置为侦听。在同一方法的第二个参数中，您可以设置要听的内容

这段代码适用于Chrome、Firefox和Safari。在其他浏览器中，您可以使用事件，例如
'domatrtmodified'
和
'propertychange'
，如果您只想查看修改的属性，例如

祝你好运