html要素のサイズが変わった時に発火したい

Question

const elm = document.createElement("div")
elm.style.width = "100%"

console.log("width",elm.offsetWidth); // 1

elm.addEventListener("resize",()=>{
    console.log('Resize!!');
})

document.body.appendChild(elm)
// 3

console.log("width",elm.offsetWidth); // 2

1と2で結果が違います。しかしResize!!は出力されていません
3のタイミングでResize!!と出力させる方法を教えてください

Comments

[ak.n]

6-8行目のリスナー登録のところ、

const observer = new ResizeObserver(() => {
console.log('Resize!!');
});
observer.observe(elm);

じゃないですかね。
div 要素の resize は、イベント発火しない気がしました。

[tarosei]

解決しました。
ありがとうございます。

Answer 1

const elm = document.createElement("div")

elm.style.width = "100%"

console.log("width",elm.offsetWidth); // 1

// 変更を加えた箇所 >>>>
const observer = new ResizeObserver(() => {
    console.log('Resize!!');
});

observer.observe(elm);
// <<< 変更を加えた箇所

document.body.appendChild(elm)

console.log("width",elm.offsetWidth); // 2