Observe size change of element

Question

This is not a duplicate! I'm not satisfied with the result of other answers. If you still think it is a duplicate, please comment it before why you think it is!

---

I have to observe size changes of elements. I've tried to do it by creating a setter on the offsetWidth property like this:

const div = document.querySelector("div");

div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));


let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
    get: () => width,
  set: val => {
    width = val;
    div.dispatchEvent(new Event("resize"));
  }
});

document.querySelector("button").onclick = () => div.style.width = "200px";

div {
  background-color: #f00;
  width: 300px;
  height: 300px;
}

<div></div>
<button>
Set size
</button>

Click on the red box to log the size. Then press the button. Nothing happens. If you click the box again, it will still show the old size. Why does this not work?

Answer 1

Have you considered using a ResizeObserver?

// get references to the elements we care about
const div = document.querySelector('.demo');
const button = document.querySelector('button');

// wire the button to resize the div
button.addEventListener('click', () => div.style.width = `${Math.random() * 100}%`);

// set up an observer that just logs the new width
const observer = new ResizeObserver(entries => {
  const e = entries[0]; // should be only one
  console.log(e.contentRect.width);
})

// start listening for size changes
observer.observe(div);

.demo { /* not really relevant. just making it visible. */
  background: skyblue;
  min-height: 50px;
}

<button>Change Size</button>
<div class="demo">Demo</div>

Answer 2

Microsoft's Internet Explorer supports onresize on all HTML elements. In all other Browsers the onresize is only available on the window object. https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

If you want to have onresize on a div in all browsers check this:

http://marcj.github.io/css-element-queries/

This library has a class ResizeSensor which can be used for resize detection.