使用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',如果你想只看到修改的属性,示例所示.

祝好运.