javascript - 使用 Javascript 跟踪 HTML 元素的显示变化

Question

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

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

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

无论如何我可以跟踪与该元素的显示相关的任何更改吗？当元素更改任何显示变量时，是否会触发一般事件？

Answer 1

只需使用诸如:

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。对于其他浏览器，您可以使用事件，例如 'DOMAttrModified' 和 'propertychange'，例如，如果您只想查看修改的属性。

祝你好运。