7cc@はてなブログ

JavaScriptとかとか

element.onresize

まだ無い。

<追記>将来的には ResizeObserver を使う</追記>

実装されるらしい

7 Web application APIs — HTML Standard

W3Cの古い分類だとwindowにしかない。Editors' Draftだとelemmentに分類されている。
つまり変更があった。

実装状況

実装されていない。

IEではattachevent + onresize があるが、addEventListenerでは使えない。
elem.style.height = "100px"
に反応するが、ノード追加には反応してくれない。不完全。

現在の方法

無い。setInterval/Mutation observerくらい?

要素がリサイズされる場合と、それを知る方法を表にしてみた。
リサイズを知るのは難しい。

when resize how to know
css resize mousedown/move/up & touch
change css dis/abled Mutation observer (attributes: true)
inline css
add/remove childNodes Mutation observer
window resize window resize
zoom

css resizeはこういうの

.resize {
  reize: both
}

element.onresizeが来てもIE11以下では使えるようにはならないし、なかなか難しい。