Wykryj zmianę stylu elementu w chrome

Question

Próbuję znaleźć sposób na wykrycie zmian w stylu elementu, ale nie miałem szczęścia. Poniższy kod działa na nowej właściwości zdefiniowanej jako tempBgColor, ale nie mogę przesłonić istniejącej właściwości, takiej jak kolor. Wiem, że jquery ma funkcję watch, ale wykrywa tylko zmiany z api jquery, ale nie zmienia bezpośrednio wartości stylu podobnego do 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 + "!"); 
}); 

Jakieś wskazówki?

Answer 1

Powinieneś być w stanie to zrobić z MutationObserver - patrz demo (tylko Webkit), który jest nowym, błyszczącym sposobem otrzymywania powiadomień o zmianach w DOM. Starszym, teraz przestarzałym sposobem było Mutation events.

Demo po prostu rejestruje w konsoli stare i nowe wartości po kliknięciu akapitu. Zauważ, że stara wartość nie będzie dostępna, jeśli została ustawiona za pomocą nieinkreującej reguły CSS, ale zmiana nadal będzie wykrywana.

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

zgłosił this blog post, dla niektórych z powyższym kodzie.

Answer 2

tutaj jest naiwna implementacja za pomocą setTimeout z undescorej.

Jedynym sposobem sprawdzenia, która zmiana została dokonana, jest przejrzenie właściwości stylu obiektu.

Oto żywo 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

Z Chrome Developer Tools otwartych, można znaleźć element, którego styl zmieniają jesteś zainteresowany, kliknij prawym przyciskiem myszy, wybierz „Break on ...” i " Atrybuty modyfikacji ".