JavaScript の getBoundingClientRect() メソッドを使用して DIV の寸法変更を検出する方法

このページでは、JavaScript、jQuery、および HTML を使用して DIV の寸法変更を検出する方法について解説します。

方法

DIV の寸法変更を検出するには、以下の 3 つの方法があります。

JavaScript の MutationObserver API を使用する

MutationObserver API は、DOM の変更を監視する API です。この API を使用して、DIV の寸法変更を検出できます。

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // DIV の寸法が変更された
    }
  });
});

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

jQuery の resize イベントを使用する

jQuery を使用している場合は、resize イベントを使用して DIV の寸法変更を検出できます。

$(div).on('resize', function() {
  // DIV の寸法が変更された
});

HTML の onresize 属性を使用して、DIV の寸法変更を検出できます。

<div onresize="myFunction()">
  ...
</div>

• MutationObserver API は、最も汎用的な方法です。
• jQuery の resize イベントは、jQuery を使用している場合は最も簡単な方法です。
• HTML の onresize 属性は、最も簡単な方法ですが、ブラウザのサポート状況によっては使用できない場合があります。

補足

• DIV の寸法変更を検出するだけでなく、変更後の寸法を取得することもできます。

JavaScript の MutationObserver API を使用する

const div = document.getElementById('my-div');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // DIV の寸法が変更された
      console.log('DIV の幅:', div.clientWidth);
      console.log('DIV の高さ:', div.clientHeight);
    }
  });
});

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

jQuery の resize イベントを使用する

const div = $('#my-div');

div.on('resize', function() {
  // DIV の寸法が変更された
  console.log('DIV の幅:', div.width());
  console.log('DIV の高さ:', div.height());
});

HTML の onresize 属性を使用する

<div id="my-div" onresize="myFunction()">
  ...
</div>

<script>
function myFunction() {
  // DIV の寸法が変更された
  console.log('DIV の幅:', document.getElementById('my-div').clientWidth);
  console.log('DIV の高さ:', document.getElementById('my-div').clientHeight);
}
</script>

• 各サンプルコードは、DIV の寸法変更を検出する方法を示しています。
• 各サンプルコードは、DIV の幅と高さをコンソールに出力します。
• 各サンプルコードは、さまざまな方法で DIV の寸法変更を検出します。

• 各サンプルコードを HTML ファイルにコピーして保存します。
• ブラウザで HTML ファイルを開きます。
• DIV のサイズを変更します。
• コンソールを確認します。

• 各サンプルコードを改造して、ニーズに合わせて変更できます。
• 例えば、DIV の寸法変更に応じて何か処理を実行するように改造できます。

その他の DIV の寸法変更を検出する方法

JavaScript の setInterval() メソッドを使用する

const div = document.getElementById('my-div');

const interval = setInterval(() => {
  // DIV の幅と高さを取得
  const width = div.clientWidth;
  const height = div.clientHeight;

  // 前回の幅と高さと比較
  if (width !== previousWidth || height !== previousHeight) {
    // DIV の寸法が変更された
    console.log('DIV の幅:', width);
    console.log('DIV の高さ:', height);
  }

  // 前回の幅と高さを更新
  previousWidth = width;
  previousHeight = height;
}, 100); // 100 ミリ秒間隔で実行

//clearInterval(interval); // 停止

const div = document.getElementById('my-div');

const resizeObserver = new ResizeObserver(() => {
  // DIV の境界ボックスを取得
  const boundingClientRect = div.getBoundingClientRect();

  // DIV の幅と高さを取得
  const width = boundingClientRect.width;
  const height = boundingClientRect.height;

  // DIV の寸法が変更された
  console.log('DIV の幅:', width);
  console.log('DIV の高さ:', height);
});

resizeObserver.observe(div);

//resizeObserver.unobserve(div); // 停止

CSS の calc() 関数を使用する

<div style="width: calc(50% - 10px); height: calc(50% - 10px);">
  ...
</div>

各方法のメリットとデメリット

• 汎用性が高い方法が必要であれば、MutationObserver API を使用します。
• jQuery を使用している場合は、jQuery の resize イベントを使用します。
• 非常に簡単な方法が必要であれば、HTML の onresize 属性を使用します。
• どのブラウザでも使用できる方法が必要であれば、setInterval() メソッドを使用します。
• CSS で簡単に実装できる方法が必要であれば、calc() 関数を使用します。