DIV 要素の寸法変化を確実に検出するにはどうすればよいですか?

DIV 要素の寸法変化の検出

ブラウザ ウィンドウのサイズが変更されたときに、DIV 要素の寸法変化を検出する際に問題が発生しました。この質問では、この問題に対する考えられる解決策を検討します。

jQuery サイズ変更イベント バインディング

コールバック関数を DIV の jQuery サイズ変更イベントにバインドする最初のアプローチは間違っています。サイズ変更イベントは、DIV のサイズが変更された場合ではなく、ウィンドウのサイズが変更された場合にのみトリガーされます。

解決策: Resize Observer API

新しいソリューションは Resize です。ブラウザーを適切にサポートする Observer API。この API を使用すると、要素の寸法の変化を観察できます:

const observer = new ResizeObserver((entries) => {
  // Code to handle dimension changes
});

observer.observe(targetElement);

提供された HTML サンプルでは、​​次のように Resize Observer API を使用できます:

const textbox = document.getElementById('textbox');
const width = document.getElementById('width');
const height = document.getElementById('height');

const observer = new ResizeObserver(() => {
  width.value = textbox.offsetWidth;
  height.value = textbox.offsetHeight;
});

observer.observe(textbox);

このコードテキストボックスの寸法が変更されると、幅と高さの出力が更新されます。

以上がDIV 要素の寸法変化を確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。