用Javascript跟踪HTML元素上的显示变化

Track display changes on HTML element with Javascript

本文关键字：显示 变化 元素 Javascript 跟踪 HTML      更新时间：2023-09-26

假设我有一个给定的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。对于其他浏览器，您可以使用事件，如'DOMAttrModified'和'propertychange'，如果您只想看到属性修改，在示例中。

好运。

看起来您可能指的是突变事件(可以在这里的潜在相关问题中找到)。您可能已经发现，大多数更改跟踪都集中在输入元素上。

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

我认为用事件来跟踪是不可能的，这里是一个完整的事件列表:http://www.quirksmode.org/dom/events/index.html

相关文章：