JavaScript でスタイルの変更を監視できますか?

イベント リスナーを使用してスタイルの変更を監視できますか?

フロントエンド開発の領域では、スタイルの変更に対応できるようになります動的に非常に貴重なものになる可能性があります。これまで、スタイルの変更を追跡する jQuery イベント リスナーを作成したいという要望がありました。ただし、この機能はネイティブでは利用できません。

代わりに、回避策が開発されました。 jQuery の内部 CSS メソッドをオーバーライドすることで、スタイルの変更が発生するたびにイベントを起動するトリガーをメソッドの最後に追加できます。

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

このソリューションは、イベント リスナーをスタイルの変更にバインドする方法を提供しました。

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

現代のテクニックとMutationObservers

それ以来、テクノロジーは進歩し、MutationObservers は、「style」属性の変更を検出するための、より現代的で標準に準拠したアプローチを提供します。現在、jQuery は必要ありません:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

このアプローチは、Internet Explorer 11 を含むほとんどの最新のブラウザーでサポートされています。 MutationObserver を利用すると、スタイルの変更を効果的に監視し、アプリケーションで適切に対応できます。

以上がJavaScript でスタイルの変更を監視できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。