その他のテクニック：getComputedStyle() や MutationObserver で高度な取得

2024-04-13

JavaScript で div の高さを取得する方法

このチュートリアルでは、JavaScript のみを使用して div要素 の高さを取得する方法を説明します。3 つの主要な方法と、それぞれの利点と欠点について詳しく解説します。

方法 1: element.offsetHeight プロパティ

最も基本的な方法は、offsetHeight プロパティを使用することです。これは、要素の高さをピクセル単位で返します。パディングと境界線を含む高さが含まれますが、スクロールバーの高さは含まれません。

const myDiv = document.getElementById('myDiv');
const height = myDiv.offsetHeight;
console.log(height); // 例：200

利点:

シンプルで分かりやすい
ほとんどの場合で十分な精度

スクロールバーの高さを含めない
要素が非表示の場合、0 を返す

方法 2: element.getBoundingClientRect() メソッド

getBoundingClientRect() メソッドは、要素の境界ボックスに関する情報を取得します。この情報を使用して、要素の高さを計算できます。

const myDiv = document.getElementById('myDiv');
const rect = myDiv.getBoundingClientRect();
const height = rect.bottom - rect.top;
console.log(height); // 例：200

要素が非表示の場合でも高さを取得できる

offsetHeight よりも少し複雑

方法 3: jQuery ライブラリを使用する

jQuery ライブラリを使用すると、height() メソッドを使用して要素の高さを簡単に取得できます。

$(document).ready(function() {
  const height = $('#myDiv').height();
  console.log(height); // 例：200
});

コードが簡潔になる
クロスブラウザ互換性がある

jQuery ライブラリの読み込みが必要

ほとんどの場合、方法 1: element.offsetHeight プロパティ で十分です。シンプルで分かりやすく、必要な情報もほとんど含まれています。

スクロールバーの高さを含める必要がある場合は、方法 2: element.getBoundingClientRect() メソッド を使用する必要があります。

要素が非表示の場合でも高さを取得する必要がある場合は、方法 2 または 方法 3: jQuery ライブラリを使用する を使用する必要があります。

補足

上記のコード例は、単一の div 要素の高さを取得する方法を示しています。複数の要素の高さを取得する場合は、ループを使用する必要があります。
CSS の height プロパティで設定された高さは、上記のいずれの方法でも取得できません。これは、CSS の値は実際にレンダリングされた高さとは異なる場合があるためです。
要素の高さを動的に変更する場合は、MutationObserver API を使用して変更を検出できます。

JavaScript で div の高さを取得するサンプルコード

方法 1: element.offsetHeight プロパティ

<!DOCTYPE html>
<html>
<head>
  <title>Get Div Height</title>
</head>
<body>
  <div id="myDiv" style="height: 200px; width: 100px; border: 1px solid black;">
    コンテンツ
  </div>
  <script>
    const myDiv = document.getElementById('myDiv');
    const height = myDiv.offsetHeight;
    console.log(height); // 200 (パディングと境界線を含む高さ)
  </script>
</body>
</html>

方法 2: element.getBoundingClientRect() メソッド

<!DOCTYPE html>
<html>
<head>
  <title>Get Div Height</title>
</head>
<body>
  <div id="myDiv" style="height: 200px; width: 100px; border: 1px solid black; overflow-y: scroll;">
    コンテンツ
  </div>
  <script>
    const myDiv = document.getElementById('myDiv');
    const rect = myDiv.getBoundingClientRect();
    const height = rect.bottom - rect.top;
    console.log(height); // 200 (スクロールバーを含む高さ)
  </script>
</body>
</html>

方法 3: jQuery ライブラリを使用する

<!DOCTYPE html>
<html>
<head>
  <title>Get Div Height</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv" style="height: 200px; width: 100px; border: 1px solid black;">
    コンテンツ
  </div>
  <script>
    $(document).ready(function() {
      const height = $('#myDiv').height();
      console.log(height); // 200
    });
  </script>
</body>
</html>

説明

各例では、myDiv という ID を持つ div 要素を作成しています。
高さ、幅、境界線スタイルを設定して、要素の高さを視覚的に確認できるようにしています。
JavaScript コードを使用して、3 つの方法で要素の高さを取得しています。
コンソールログを使用して、取得した高さを表示しています。

実行方法

上記のコードを HTML ファイル (例: index.html) に保存します。
Web ブラウザで HTML ファイルを開きます。
ブラウザの開発者ツールを開き、コンソールタブに切り替えます。
コンソールログに、各方法で取得した div の高さが表示されることを確認します。

これらの例は、基本的な使用方法を示しています。より複雑なシナリオでは、追加の処理が必要になる場合があります。
コードを実行する前に、ブラウザで JavaScript と jQuery が有効になっていることを確認してください。

JavaScript で div の高さを取得するその他の方法

CSS カスタムプロパティを使用して、要素の高さを取得できます。この方法は、比較的新しい方法ですが、簡潔でエレガントなソリューションを提供します。

<!DOCTYPE html>
<html>
<head>
  <title>Get Div Height</title>
  <style>
    #myDiv {
      height: 200px;
      width: 100px;
      border: 1px solid black;
    }

    #myDiv::before {
      content: "";
      display: block;
      height: var(--div-height);
      background-color: rgba(0, 0, 0, 0);
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
  <script>
    const myDiv = document.getElementById('myDiv');
    const height = parseFloat(getComputedStyle(myDiv).getPropertyValue('--div-height'));
    console.log(height); // 200
  </script>
</body>
</html>

#myDiv::before 疑似要素を使用して、高さ 0 の透明なブロック要素を作成します。
--div-height という CSS カスタムプロパティを定義し、要素の高さに設定します。
JavaScriptを使用して、getComputedStyle() メソッドと getPropertyValue() メソッドを使用して、CSS カスタムプロパティの値を取得します。

簡潔でエレガントなソリューション
追加のライブラリを必要としない

比較的新しい方法であり、すべてのブラウザでサポートされているとは限らない

getBoundingClientRect() メソッドと requestAnimationFrame() 関数を使用して、要素の高さを取得できます。この方法は、要素の高さが動的に変化するような場合に役立ちます。

<!DOCTYPE html>
<html>
<head>
  <title>Get Div Height</title>
</head>
<body>
  <div id="myDiv" style="height: 200px; width: 100px; border: 1px solid black;"></div>
  <script>
    const myDiv = document.getElementById('myDiv');
    let height = 0;

    function getHeight() {
      height = myDiv.getBoundingClientRect().height;
      console.log(height);
      requestAnimationFrame(getHeight);
    }

    requestAnimationFrame(getHeight);
  </script>
</body>
</html>

requestAnimationFrame() 関数を使用して、ブラウザの描画サイクルに合わせて再帰的に getHeight() 関数を呼び出します。
getHeight() 関数は、getBoundingClientRect() メソッドを使用して要素の高さを取得し、コンソールログに記録します。

要素の高さが動的に変化する場合に役立つ

requestAnimationFrame() 関数はすべてのブラウザでサポートされているとは限らない

MutationObserver API を使用して、要素の高さが変更されたことを検出し、その高さを取得できます。この方法は、要素の高さがプログラムによって変更されるような場合に役立ちます。

<!DOCTYPE html>
<html>
<head>
  <title>Get Div Height</title>
</head>
<body>
  <div id="myDiv" style="height: 200px; width: 100px; border: 1px solid black;"></div>
  <script>
    const myDiv = document.getElementById('myDiv');
    const observer = new MutationObserver(mutations => {
      for (const mutation of mutations) {
        if (mutation.type === 'childList') {
          const height = myDiv.offsetHeight;
          console.log(height);
        }
      }
    });

    observer.observe(myDiv, { childList: true });

    // 要素の高さを変更
    myDiv.style.height = '300px';
  </script>
</body>
</html>