JavaScript を使用して要素のスタイルの変更を検出できますか?

MutationObserver でスタイルの変更を聞く

質問:
スタイルの変更を監視することは可能ですか? JavaScriptでイベントリスナーを使用する要素?たとえば、jQuery を使用して要素の寸法が変更されたことを検出できますか?

答え:

はい、MutationObserver は、要素の変化を観察できる最新のブラウザ API です。要素の属性 (その要素を含む) style.

実装:

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'] });

例:

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

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

これは、以下:

width: 100px;
color: red;

サポート:

MutationObserver は、IE 11 を含む最新のブラウザーで広くサポートされています。

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