Observe size change of element

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?

Solution

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>