How to detect DOM element mutations without jQuery

Question

Let's say I have the following HTML:

<div id='content'></div>

I'd like to be alerted when height mutations occur on this element. I was hoping the MutationObserver class would help in this, but here is my problem with it:

document.querySelector('#content').style.height = '100px'

It triggers my callback like expected, however normal user interactions won't trigger this, e.g., http://jsfiddle.net/wq4q9/2/

My question is, what is the best modern approach for checking if an element's height has changed?

No jQuery please.

Answer 1

I don't think there's anything you can do other than poll. (Another way your observer wouldn't be triggered would be if you changed a CSS rule that applied to the element, changed its parent's size and its size was dependent on that, added a new style sheet that affected it...)