watchcss

Watch a DOM element for [style] css properties changes.

It uses MutationObserver internally

Synopsis

new Watchcss(el, ['propA', 'propB', ...])
  .observe()
  .disconnect()
  .on('change', function (changes) {})
  .on('change:propA', function (change) {})

Usage

var el = document.getElementById('foo');

var watchcss = new Watchcss(el, ['transform-origin', 'border-radius']);

watchcss.on('change', function (changes) {
  console.log('transform-origin OR border-radius have changed!', changes);
});

outputs:

[
  {
    propName: 'transform-origin',
    oldValue: 'center center',
    newValue: 'left center'
  },
  {
    propName: 'border-radius',
    oldValue: '3px',
    newValue: '10px'
  }
]

or with a single property:

watchcss.on('change:transform-origin', function (change) {
  console.log('transform-origin has changed!', change);
});

outputs:

{
  propName: 'transform-origin',
  oldValue: 'center center',
  newValue: 'left center'
}