您可以追蹤 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中文網其他相關文章！