ひかりの備忘録

ResizeObserver を使って要素の大きさ変更時に変更を行う

要素を HTML で以下のように定義します。

<div id="element" style="height: 80px; width: 100%; background: #888; line-height: 80px; font-size: 36px; text-align: center;">
    0
</div>

以下のように JavaScript を記述しました。この例では、要素のサイズが変更されたときにカウントアップします。

    const resizeObserver = new ResizeObserver((entries) => {
    const element = document.getElementById("element");
    element.innerText = "" + (parseInt(element.innerText) + 1);
});
resizeObserver.observe(document.getElementById("element"));

ウィンドウをリサイズして要素を大きく・小さくしカウントアップの動作を確認できます。

0