如何使用 jQuery 检测 CSS 属性的变化？

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

在 Web 开发中经常出现检测 CSS 属性更改的需求。例如，您可能希望在元素的显示属性更改时执行特定操作。然而，确定 jQuery 中的 display 属性或任何其他 CSS 属性是否已原生更改可能是一个挑战。

使用 DOMAttrModified 检查 CSS 属性更改

幸运的是， DOM Level 2 事件模块通过突变事件满足了这一需求。其中一个事件 DOMAttrModified 提供了监视属性更改（包括样式更改）的功能。

要使用 DOMAttrModified，您可以实现以下代码：

<code class="js">document.documentElement.addEventListener('DOMAttrModified', function(e) {
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';</code>

此代码将一个侦听器附加到DOMAttrModified 事件的根元素 (document.documentElement)。当 style 属性发生变化时，监听器会捕获之前的值和新值。

Internet Explorer 的替代方案：propertychange

如果您需要支持 Internet Explorer 浏览器，您可以利用“propertychange”事件作为 DOMAttrModified 的后备。它可以可靠地检测 IE 中的样式更改。

注意：

需要注意的是，突变事件已被弃用，并且可能并非所有浏览器都支持。要获得更具跨浏览器兼容性的解决方案，请考虑使用突变观察器。

以上是如何使用 jQuery 检测 CSS 属性的变化？的详细内容。更多信息请关注PHP中文网其他相关文章！