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

JavaScript を使用した DIV 寸法の変更の検出

ウィンドウのサイズ変更中に DIV 内の要素の位置が変更される場合がありますが、DIV の寸法自体も変更される場合があります。これらの寸法の変化を監視するには、さまざまな方法を利用できます。

1. jQuery サイズ変更イベント (廃止)

以前は、ターゲット DIV で jQuery サイズ変更イベントを使用しようとしました。ただし、この方法は通常、div に対しては効果がありません。ウィンドウやドキュメントのサイズ変更に適しています。

2. Mutation Observer API

新しいアプローチは Mutation Observer API で、これを使用すると DOM 要素への変更を監視できます。これには寸法の変更が含まれる場合があります。以下に例を示します:

const element = document.getElementById('test_div');

const observer = new MutationObserver(() => {
  console.log('DIV dimensions have changed');
});

observer.observe(element, { attributes: true, attributeFilter: ['style'] });

3.サイズ変更オブザーバー API (推奨)

サイズ変更オブザーバー API は、特に寸法の変化の監視を対象としており、最新のブラウザーでサポートされています。使用方法は次のとおりです:

const element = document.getElementById('test_div');

const observer = new ResizeObserver(() => {
  console.log('DIV dimensions have changed');
});

observer.observe(element);

DIV の次元が変更されると、オブザーバーは指定されたコールバック関数をトリガーします。

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