您可以跟踪 JavaScript 中的样式属性更改吗？

是否可以监控样式属性更改？

jQuery 框架缺少针对样式更改的特定事件侦听器。然而，利用 MutationObserver 可以有效地跟踪“样式”属性修改。

使用 MutationObserver

const target = document.getElementById('myId');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutationRecord) => {
    console.log('Style changed!');
  });
});

observer.observe(target, { attributes: true, attributeFilter: ['style'] });

在回调函数中，mutationRecord 对象提供对旧样式值和新样式值的访问。

使用 jQuery Override 的临时解决方案

之前，基于 jQuery 的解决方法涉及暂时覆盖 prototype.css 方法：

(function() {
  var ev = new $.Event('style');
  var orig = $.fn.css;
  $.fn.css = function() {
    $(this).trigger(ev);
    return orig.apply(this, arguments);
  }
})();

虽然在 MutationObserver 支持下不再需要此方法，但它演示了如何拦截样式更改。

其他注意事项

MutationObserver 在现代浏览器（包括 IE 11）中得到良好支持，使其成为可行的检测样式属性修改的解决方案。

以上是您可以跟踪 JavaScript 中的样式属性更改吗？的详细内容。更多信息请关注PHP中文网其他相关文章！