クロムの要素スタイルの変更を検出

Question

要素スタイルの変更を検出する方法を見つけようとしていますが、私は多くの運がなかった。以下のコードは、tempBgColorのように定義する新しいプロパティで動作しますが、色のような既存のプロパティをオーバーライド/シャドウできません。私はjqueryが時計関数を持っていることを知っていますが、jquery APIからの変更を検出するだけで、elem.style.colorのようなスタイルの値を直接変更することはできません。

var e = document.getElementById('element'); 
e.style.__defineGetter__("color", function() { 
    return "A property"; 
}); 
e.style.__defineSetter__("color", function(val) { 
    alert("Setting " + val + "!"); 
}); 

任意のポインタ？

Answer 1

demo（Webkitのみ）を参照してください。これは、DOMの変更について通知を受ける、光沢のある新しい方法です。MutationObserverを使用することができます。古い、廃止予定の方法はMutation eventsでした。

デモでは、段落をクリックしたときに古い値と新しい値がコンソールに単に記録されます。古い値は、インラインでないCSSルールで設定した場合は使用できませんが、変更は引き続き検出されます。

HTML

<p id="observable" style="color: red">Lorem ipsum</p>​ 

はJavaScript

var MutationObserver = window.WebKitMutationObserver; 

var target = document.querySelector('#observable'); 

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log('old', mutation.oldValue); 
    console.log('new', mutation.target.style.cssText); 
    });  
}); 

var config = { attributes: true, attributeOldValue: true } 

observer.observe(target, config); 

// click event to change colour of the thing we are observing 
target.addEventListener('click', function(ev) { 
    observable.style.color = 'green'; 
    return false; 
}, false); 

クレジットthis blog postに、上記のコードの一部について。

Answer 2

ここでは、未使用のコードでsetTimeoutを使用する単純な実装です。

変更が行われたことを確認する唯一の方法は、スタイルオブジェクトのプロパティを反復することです。ここで

は、「選択「でブレイク...」とあなたはそのスタイルの変更あなたは、それを右クリックに興味を持っている要素を見つけることができ、Chromeの開発ツールを開いた状態で、ライブ example

$(function() { 
    var ele = document.getElementById('ele'), 
     oldStyle = {}; 

function checkEquality() { 
    style = _.clone(ele.style); 
    if (!_.isEqual(style, oldStyle)) { 
    console.log('Not equal'); 
    oldStyle = _.clone(style); 
    } else { 
    console.log('Equal'); 
    } 
    _.delay(checkEquality, 2000); 
} 

checkEquality(); 

$('a#add_prop').on('click', function() { 
    var props = $('#prop').val().replace(/ /g, '').split(':'); 
    console.log(props); 
    $(ele).css(props[0], props[1]); 
}); 

$('#prop').on('keydown', function (e) { 
    if (e.keyCode == 13) { 
    $('a#add_prop').trigger('click');  
    } 
}); 

}); 

Answer 3

です属性の変更 "を参照してください。