Divタグのresizeイベントを拾うには - souki-paranoiastのブログ

取り扱う言語

HTML
JavaScript

背景／目的

↓みたいな要素は、右下に可変にできる機能が付与されている。

<div id="resizeDiv" style="resize: both; overflow: scroll; width: 200px; height: 200px; background-color: red;">
</div>

で、稀にこれのサイズ変更が発生したタイミングで処理を行いたいことがある。
例）表や裏にサイズ違いのDivを配置して一緒にサイズ変更したいとか…

イベントを拾う

    (() => {
        const target = document.getElementById("resizeDiv");
        const observer = new MutationObserver(() => {
            console.log(target.style.width, target.style.height);
        });
        // https://qiita.com/MysticDoll/items/7b2654b7a8b58d773286 // ←以前参考にしたのに消えている。。。 一応Optionはここから見れる　https://developer.mozilla.org/ja/docs/Web/API/MutationObserver#Specifications
        const options = {
            attriblutes: true,
            attributeFilter: ["style"]
        };
        observer.observe(target, options);
    })();

これでイケる。割と便利。onResizeがDivに指定できるのが一番楽なんだけどなぁ。。