Get notified for CSS, Attribute or Property changes in an element

jQuery-Watch is a nice little plugin that monitors CSS, Attribute or Property changes in an element.

It uses the MutationObserver internally for modern browsers and uses setInterval() polling as a fallback for older browsers.

MutationObserver Syntax

Browser Support / Polyfill

var element = document.getElementById("Notebox");

 

var observer = new MutationObserver(observerChanges);

observer.observe(element, {

    attributes: true,

    subtree: opt.watchChildren,

    childList: opt.watchChildren,

    characterData: true


});

 
/// when you're done observing
observer.disconnect();

 

function observerChanges(mutationRecord, mutationObserver) {

    console.log(mutationRecord);

}

jQuery-Watch Syntax

$("#btnChangeContent").click(function () {

    // assign text programmatically

    $("#SomeContent").text("Hello - time is " + new Date());


});

// watch the content
$("#SomeContent").watch({

    properties: "prop_innerHTML",

    watchChildren: true,

    callback: function (data, i) {

        console.log("text changed");

        alert('text changed' + data.vals[i]);

    }


});

jQuery-Watch on Github