JavaScript でスタイル属性の変更を追跡できますか?

スタイル属性の変更を監視することは可能ですか?

jQuery フレームワークには、スタイル変更用の特定のイベント リスナーがありません。ただし、MutationObserver を利用すると、'style' 属性の変更を効果的に追跡できます。

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 中国語 Web サイトの他の関連記事を参照してください。