Can you have a javascript hook trigger after a DOM element's style object changes?

Question

An element has a javascript style object which contains the different names and values of css styles. I'd like to trigger a function every time this object changes without use of polling. Is there any way to do this in a way that is cross-browser compatible and would work reliably with third party code (because let's say you're providing a drop-in script)? Binding a javascript event like DOMAttrModified or DOMSubtreeModified won't suffice because they don't work in Chrome.

Answer 1

Edit 4: Live Demo

$(function() {    $('#toggleColor').on('click', function() {      $(this).toggleClass('darkblue');    }).attrchange({      trackValues: true,      callback: function(event) {        $(this).html("<ul><li><span>Attribute Name: </span>" + event.attributeName + "</li><li><span>Old Value: </span>" + event.oldValue + "</li><li><span>New Value: </span>" + event.newValue + "</li></ul>");      }    });  });

body {    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;    font-size: 12px;  }  #toggleColor {    height: 70px;    width: 300px;    padding: 5px;    border: 1px solid #c2c2c2;    background-color: #DBEAF9;  }  #toggleColor span {    font-weight: bold;  }  #toggleColor.darkblue {    background-color: #1A9ADA;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>  <p>Click below div to toggle class darkblue.</p>  <div id="toggleColor"></div>

Edit 3: I have put all this together as a plugin that can be downloaded from git attrchange and here is the demo page.

Edit 2:

1. Fix for propertName in IE7 & IE8

Edit 1:

1. Handle multiple elements
2. Ordered the conditions as MutationObserver, DOMAttrModified and onpropertychange for better implementation.
3. Added modified Attribute Name to the callback.

Thanks to @benvie for his feedback.

DEMO: http://jsfiddle.net/zFVyv/10/ (Tested in FF 12, Chrome 19 and IE 7.)

$(function() {     (function($) {         var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;          function isDOMAttrModifiedSupported() {             var p = document.createElement('p');             var flag = false;              if (p.addEventListener) p.addEventListener('DOMAttrModified', function() {                 flag = true             }, false);             else if (p.attachEvent) p.attachEvent('onDOMAttrModified', function() {                 flag = true             });             else return false;              p.setAttribute('id', 'target');              return flag;         }          $.fn.attrchange = function(callback) {             if (MutationObserver) {                 var options = {                     subtree: false,                     attributes: true                 };                  var observer = new MutationObserver(function(mutations) {                     mutations.forEach(function(e) {                         callback.call(e.target, e.attributeName);                     });                 });                  return this.each(function() {                     observer.observe(this, options);                 });              } else if (isDOMAttrModifiedSupported()) {                 return this.on('DOMAttrModified', function(e) {                     callback.call(this, e.attrName);                 });             } else if ('onpropertychange' in document.body) {                 return this.on('propertychange', function(e) {                     callback.call(this, window.event.propertyName);                 });             }         }     })(jQuery);      $('.test').attrchange(function(attrName) {         alert('Attribute: ' + attrName + ' modified ');     }).css('height', 100);  }); 

Ref:

1. Detect if DOMAttrModified supported
2. DOMAttrModified for chrome
3. Mutation Observer
4. Why should we avoid using Mutation events?
5. onPropertyChange IE

Mutation Observers is the proposed replacement for mutation events in DOM4. They are expected to be included in Firefox 14 and Chrome 18

Browser Support:

onpropertychange - is supported in IE (tested in IE 7)

DOMAttrModified - is supported in IE 9, FF and Opera

MutationObservers - is very new and it worked fine in Chrome 18. Not sure how far it is supported and yet to be tested in Safari.

Thanks @benvie on adding info about WebkitMutationObserver

Answer 2

EDIT2:

If you still want to use mutation observer, use this library: mutation-summary

---

EDIT:

As I said in my answer below and thanks to Vega for his comment, using things such as object.watch or mutation observers are not recommended for using in large apps. this is actual quote from MDN:

Generally you should avoid using watch() and unwatch() when possible. These two methods are implemented only in Gecko, and they're intended primarily for debugging use. In addition, using watchpoints has a serious negative impact on performance, which is especially true when used on global objects, such as window. You can usually use setters and getters or proxies instead. See Compatibility for details.

Warning

So if cross-browser compatibility is in your check list, Again, I highly suggest overriding setters and getters of style object.

---

use object.watch and have these in mind for a cross-browser solution:

• Javascript Object.Watch for all browsers?
• object.watch polyfill
• Watch for object properties changes in JavaScript

You may override getter and setter methods of element's style object too.

There is a jQuery plugin available for this, jQuery watch