Detect element style change in chrome

Question

I\'m trying to find a way to detect changes to the element style but I haven\'t had much luck. The code below works on a new property I define like tempBgColor but I cannot

Answer 1

here is a naive implementation using setTimeout with undescorejs.

The only way to find out which change was made is to iterate through the style object properties.

Here is the 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 2

With Chrome's Developer Tools open, you can find the element whose style's change you're interested in, right click it, select "Break on..." and "Attributes modifications".

Answer 3

You should be able to do this with a MutationObserver - see demo (Webkit only), which is the new, shiny way of getting notified about changes in the DOM. The older, now deprecated, way was Mutation events.

Demo simply logs in the console the old and new values when the paragraph is clicked. Note that the old value will not be available if it was set via a non-inline CSS rule, but the change will still be detected.

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 to this blog post, for some of the code above.