<p>The idea (that seems to originate from a <a href="http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/" rel="nofollow noreferrer">blog post on backalleycoder.com</a>) is that you can use</p>

<ul>
<li><code>onresize</code> on the element itself in IE &lt;=10.</li>
<li><code>scroll</code> events on a specially crafted <code>&lt;div&gt;</code> appended as a child of the element in most other browsers</li>
<li>or <code>onresize</code> on <code>&lt;object style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;"&gt;</code> appended as a  child of the element.</li>
</ul>

<p>There's a number of libraries that implement some or all of these approaches:</p>

<ul>
<li><a href="https://github.com/sdecima/javascript-detect-element-resize" rel="nofollow noreferrer">sdecima/javascript-detect-element-resize</a> - uses <code>onresize</code> in IE + <code>scroll</code> in other browsers. Small (5KB unminified), but not actively maintained ATM.</li>
<li><a href="https://github.com/wnr/element-resize-detector" rel="nofollow noreferrer">wnr/element-resize-detector</a>: uses the same idea, but is more actively maintained, also available as an NPM package. It has the nicest readme, explaining the <a href="https://github.com/wnr/element-resize-detector#caveats" rel="nofollow noreferrer">caveats</a> and explaining that the resize-on-<code>&lt;object&gt;</code> technique is only truly needed in certain older browsers. The author even wrote a paper about this (<a href="http://arxiv.org/pdf/1511.01223v1.pdf" rel="nofollow noreferrer">Modular Responsive Web Design using Element Queries</a>). The library is quite larger (16KB minified!) (probably because it's written in a <em>less ad-hoc</em> way -- for example it has a "batchProcessorMaker" to allow running a number of functions at a later stage.)</li>
<li><a href="http://marcj.github.io/css-element-queries/" rel="nofollow noreferrer">http://marcj.github.io/css-element-queries/</a> provides a <code>ResizeSensor</code>
class that appears to use the same <code>scroll</code> technique (from another popular SO question: <a href="https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed">How to detect DIV&#39;s dimension changed?</a>). The rest of library has a different purpose, though.</li>
</ul>

<p>Note that older questions here on SO talk about:</p>

<ul>
<li><a href="http://meetselva.github.io/" rel="nofollow noreferrer"><code>attrchange</code></a> in jQuery, DOMAttrModified, etc. - that won't help you with detecting height changes that do not involve changing the <code>height</code> attribute</li>
<li>DOMSubtreeModified, MutationObserver - can be used to detect changes in <em>content</em> (which is one of the reasons that can lead to height changes -- the other being layout changes, such as a change to the width)</li>
<li>older solutions, including some jQuery plugins that use polling to accomplish this -- that's not a recommended solution, because the page will waste the user's battery even when nothing is resized.</li>
</ul>

<p>[edit] <a href="https://github.com/WICG/ResizeObserver/blob/master/explainer.md" rel="nofollow noreferrer">ResizeObserver</a> will allow to detect this without hacks in newer browsers.</p>
Detect when a DIV's height changes without polling or mutation observers
<p>I need to get the height of a <code>div</code> and get notified when its height changes according to data.</p>

<p>I am using <code>getBoundingClientRect()</code> to get the height currently, but I don't get notified of any further changes.</p>

<p>I also tried <code>DOMAttrModified</code> and <code>MutationObserver</code> to detect changes in the data, but both of them are not universally supported in all browsers.</p>

<p>What's the best way to get notifications about changes to an element's height?</p>