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

使用 Jquery 检测 CSS 属性的更改

问题：

检测“显示”CSS 属性的更改HTML 元素对于动态 Web 开发至关重要。用户经常寻求方法来监视此类属性更改。

解决方案：

虽然没有专门设计用于检测 CSS 属性更改的原生事件，但 DOM L2 事件模块定义突变事件。其中，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>

替代方案：

对于 Internet Explorer 用户， “propertychange”事件可以替代 DOMAttrModified：

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

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

这些方法可以有效检测 CSS 属性修改，使开发人员能够增强 Web 应用程序的响应能力和交互性。

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