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

});