How to detect DIV's dimension changed?

Question

I\'ve the following sample html, there is a DIV which has 100% width. It contains some elements. While performing windows re-sizing, the inner elements may be re-positioned,

Answer 1

I DO NOT recommend setTimeout() hack as it slows down the performance! Instead, you can use DOM mutation observers for listening to Div size change.

JS:

var observer = new MutationObserver(function(mutations) {
    console.log('size changed!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

HTML:

Here's the fiddle
Try to change the div size.

---

You can further wrap your method in the debounce method to improve efficiency. debounce will trigger your method every x milliseconds instead of triggering every millisecond the DIV is being resized.