使用 jQuery 检测 CSS 属性更改的事件

在 Web 开发领域，检测元素 CSS 属性的更改可以是对于实现动态更新至关重要。使用 jQuery，您可以利用 DOM 事件的强大功能来有效地监视和响应 CSS 属性（例如“显示”）的更改。

使用 DOMAttrModified 事件

现代浏览器提供对 DOM 突变事件的支持，其中包括 DOMAttrModified 事件。此事件专门设计用于在修改元素的属性时通知您，包括内联或通过外部样式表定义的 CSS 属性。

要利用 DOMAttrModified 事件，您可以利用 jQuery 的 on() 函数，如图所示下面：

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

在此示例中，我们将事件侦听器附加到 document.documentElement 元素，该元素表示文档的根。当修改样式属性（例如“display”）时，会触发此事件处理程序，允许您访问已修改属性的先前值和当前值。

利用 IE 的“propertychange”事件

对于不支持 DOMAttrModified 的旧版浏览器，您可以使用 Internet Explorer 专有的“propertychange” 事件作为后备。虽然 IE 特别支持此事件，但它可以提供可靠的方法来检测这些环境中的样式更改。

要利用 "propertychange" 事件，您可以使用 jQuery 的 on() 函数带有字符串参数，如以下示例所示：

document.documentElement.on('propertychange', function(e){
  if (e.propertyName === 'display') {
    console.log('prevValue: '   e.prevValue, 'newValue: '   e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

突变观察者注意事项

虽然上述技术是过去检测 CSS 属性变化的常用方法，较新的浏览器建议使用 Mutation Observers，它提供了一种更加标准化和简化的机制来监视特定 DOM 元素的更改。