JavaScript で DIV ディメンションの変更を確実に検出するにはどうすればよいですか?

DIV ディメンションの変更の検出

問題:

DIV のディメンションの決定は、多くの場合、特にウィンドウのサイズ変更中にその中の要素の位置が変更される場合に必要です。ただし、DIV の従来の jQuery サイズ変更イベントは、寸法の変更を検出しません。

解決策: Resize Observer API

新しいソリューションは、Resize Observer API です。 DIV への変更を監視するより良い方法

実装:

Resize Observer API を使用するには:

1. スクリプトをHTML:

   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill/dist/ResizeObserver.min.js"></script>

   ログイン後にコピー

2. 新しいサイズ変更オブザーバーの作成:

   const resizeObserver = new ResizeObserver(function(entries) {
     ...
   });

   ログイン後にコピー

3. ターゲット DIV の監視:

   resizeObserver.observe(targetDiv);

   ログイン後にコピー

4. コールバック関数を定義して、ディメンションの変更を処理します:

   function callback(entries) {
     const entry = entries[0];
     const width = entry.contentRect.width;
     const height = entry.contentRect.height;
   
     // Do something with the new dimensions
   }

   ログイン後にコピー

5. オブザーバーにコールバック関数を追加します:

   resizeObserver.addCallback(callback);

   ログイン後にコピー

   サイズ変更オブザーバー API を使用することで、次の変更を検出して応答できるようになりました。内部要素の位置が変更された場合でも、DIV の寸法が変更されます。

以上がJavaScript で DIV ディメンションの変更を確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。