DIV 要素の寸法変更を効率的に検出するにはどうすればよいですか?

DIV 要素の寸法変化の検出

DIV 要素の寸法変化の検出 (特にウィンドウのサイズ変更中) は、貴重な機能となる可能性があります。特定のシナリオでは。この記事では、Resize Observer API を使用してこれを実現する方法について説明します。

提供された HTML コードで示されているように、jQuery サイズ変更イベント ハンドラーは、この目的には適していません。サイズ変更オブザーバー API は、DOM 要素内のディメンションの変更をリッスンするための標準化されたより効率的な方法を提供します。

サイズ変更オブザーバー API の使用

DIV 内のディメンションの変更を検出するにはResize Observer API を使用して、次の手順に従います。

1. 新しい ResizeObserver を作成するインスタンス:

const observer = new ResizeObserver(callback);

2. コールバック関数を ResizeObserver コンストラクターに渡します。この関数は、監視される要素の寸法が変更されるたびに呼び出されます:

function callback(entries) {
  // Check if the entry pertains to the target DIV
  const targetIndex = entries.findIndex((entry) => entry.target === targetDiv);
  if (targetIndex < 0) {
    return;
  }

  // Update the dimensions based on the entry's contentRect
  const { width, height } = entries[targetIndex].contentRect;
  targetDiv.style.width = `${width}px`;
  targetDiv.style.height = `${height}px`;
}

3. ResizeObserver を使用してターゲット DIV を観察するインスタンス:

observer.observe(targetDiv);

4. 古いブラウザ用の Resize Observer ポリフィルを HTML コードに必ず含めてください:

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

例コード

次のコード スニペットは、サイズ変更オブザーバーを使用した実用的な例を示しています。 API:

<div>

Resize Observer API を利用すると、DIV 要素の寸法変更を効果的に検出でき、Web アプリケーションでそれに応じて対応できるようになります。

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