Tracking display changes on an HTML element using Javascript

Question

Suppose I have a given HTML element, for example:

<div id="foo">...</div> 

Inside this element, many things can happen that will change some display configurations of this element, for example, its height or fixed position.

In any case, can I track any changes related to the display of this item? Is there a common event that fires when an element changes any displayed variable?

Answer 1

Just use something like:

 MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var observer = new MutationObserver(function(mutations, observer) { // fired when a mutation occurs console.log(mutations, observer); // Use of the information here. }); observer.observe(document, { subtree: true, attributes: true //... }); 

In the MutationObserver call, you can listen for events and get a list of elements changed in variable mutations.

In the first argument to observer.observe you can configure the elements to listen on. In the second argument of the same method, you can set what you want to listen to.

This code works with Chrome, Firefox and Safari. In other browsers, you can use events such as 'DOMAttrModified' and 'propertychange' if you want to just see the changed attributes in the example.

Good luck.

Answer 2

It looks like you can refer to mutation events (found on a potentially related issue here ). As you probably discovered, most change tracking is centered around input elements.

I have not used them before before, so I can not offer much about implementation. Hope this helps!

Answer 3

I think that it is impossible to track events, here is a complete list of events: http://www.quirksmode.org/dom/events/index.html