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