javascript - 要素のサイズ変化を観察する

Question

これは重複ではありません！他の回答の結果に満足していません。それでも重複していると思われる場合は、そう思う理由の前にコメントしてください!

---

要素のサイズの変化を観察する必要があります。私は次のoffsetWidthようにプロパティにセッターを作成してそれをやろうとしました:

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>

赤いボックスをクリックしてサイズを記録します。ボタンを押します。何も起こりません。ボックスをもう一度クリックすると、古いサイズが表示されます。これが機能しないのはなぜですか？