Erkennungselement Stil ändern in Chrom

Question

Ich versuche, einen Weg zu finden, Änderungen am Element Stil zu erkennen, aber ich hatte nicht viel Glück. Der folgende Code arbeitet mit einer neuen Eigenschaft, die ich wie tempBgColor definiere, aber ich kann eine vorhandene Eigenschaft wie die Farbe nicht überschreiben/überschatten. Ich weiß, dass jQuery eine Überwachungsfunktion hat, aber es erkennt nur Änderungen von der jQuery API, aber nicht direkt den Wert eines Stils wie elem.style.color ändern.

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

Irgendwelche Zeiger?

Answer 1

Sie können dies mit einem MutationObserver tun - siehe demo (nur Webkit), das ist die neue, glänzende Möglichkeit, über Änderungen im DOM benachrichtigt zu werden. Der ältere, jetzt veraltete Weg war Mutation events.

Demo meldet einfach die alten und neuen Werte der Konsole an, wenn auf den Absatz geklickt wird. Beachten Sie, dass der alte Wert nicht verfügbar ist, wenn er über eine nicht inline CSS-Regel festgelegt wurde, die Änderung jedoch weiterhin erkannt wird.

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); 

Credit this blog post, für einige der oben genannten Code.

Answer 2

Hier ist eine naive Implementierung mit setTimeout mit undescorejs.

Die einzige Möglichkeit herauszufinden, welche Änderung vorgenommen wurde, besteht darin, die Eigenschaften des Stilobjekts zu durchlaufen. Hier

ist die Live-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

Mit Chrome Developer Tools öffnen Sie das Element, dessen Stil finden die Änderung sind Sie Interesse an der rechten Maustaste darauf, wählen Sie „Break on ...“ und " Attributänderungen ".