HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのoffsetHeightプロパティとは？使い方とサンプルコードを解説

HTML DOM offsetHeightプロパティの概要

HTML DOMのoffsetHeightプロパティは、要素の高さに対応する数値を返します。この値には、パディング（padding）、ボーダー（border）、スクロールバーが含まれますが、マージン（margin）は含まれません。

要素が画面上で実際に占める高さを取得したい場合に非常に便利なプロパティです。レイアウト計算や、要素のサイズに応じた動的な処理を行う際によく使われます。

構文

数値を返す場合の基本的な構文は以下の通りです。

HTMLelement.offsetHeight

戻り値はピクセル単位の整数値（Number型）として返されます。

HTML DOM offsetHeightプロパティの使用例

次の例では、画像とそのコンテナとなるdiv要素に対して、offsetHeightプロパティを使って高さを取得しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetHeight</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #containerDiv {
        margin: 0 auto;
        height: 100px;
        width: 100px;
        overflow: auto;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-offsetHeight</legend>
            <div id="containerDiv">
                <img id="image" src="https://www.tutorialspoint.com/db2/images/db2-mini-logo.jpg">
            </div>
            <input type="button" onclick="getHeight()" value="Get height of picture">
            <input type="button" onclick="fitHeight()" value="Remove Scrollbars">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var imgSelect = document.getElementById("image");
    var containerDiv = document.getElementById("containerDiv");
    function getHeight() {
        divDisplay.innerHTML = 'Height of above picture with padding & border: '+imgSelect.offsetHeight;
        divDisplay.innerHTML += '<br>Height of container with padding & border:     '+containerDiv.offsetHeight;
    }
    function fitHeight() {
        containerDiv.style.height = imgSelect.height+'px';
        containerDiv.style.width = imgSelect.width+'px';
        containerDiv.style.overflow = 'hidden';
        getHeight();
}
</script></body></html>

コードの解説

  • containerDiv：高さ100px・幅100pxでoverflow: autoが指定されたコンテナ要素です。内容が収まらない場合はスクロールバーが表示されます。
  • getHeight()関数：画像（imgSelect）とコンテナ（containerDiv）それぞれのoffsetHeightの値を取得し、画面に表示します。この値にはパディングとボーダー、さらにスクロールバーの高さも含まれています。
  • fitHeight()関数：コンテナの高さと幅を画像の実際のサイズに合わせて設定し、overflow: hiddenを指定することでスクロールバーを非表示にします。その後、再度getHeight()を呼び出して新しい高さを表示します。

実行結果

ボタンをクリックする前：

初期状態では、コンテナには固定の高さ（100px）が設定されているため、画像によってはスクロールバーが表示されることがあります。

「Get height of picture」ボタンをクリックした後：

画像およびコンテナのoffsetHeightの値が表示されます。コンテナの場合、スクロールバーの分だけ実際のCSSで指定した高さより大きな値になることがあります。

「Remove Scrollbars」ボタンをクリックした後：

コンテナのサイズが画像にフィットするよう調整され、スクロールバーが消えます。これにより、offsetHeightの値も変化することが確認できます。

まとめ

offsetHeightプロパティは、要素の「見た目上の高さ」を取得するための重要なプロパティです。類似プロパティとの違いを整理すると以下のようになります。

  • clientHeight：パディングは含むが、ボーダーとスクロールバーは含まない
  • scrollHeight：スクロールが必要な場合の内容全体の高さを含む
  • offsetHeight：パディング＋ボーダー＋スクロールバーを含む（マージンは含まない）

用途に応じてこれらのプロパティを使い分けることで、より正確なレイアウト制御が可能になります。

  1. HTML DOMのVideo heightプロパティの使い方を解説

    HTML DOMのVideo heightプロパティは、メディア（動画）の高さに対応する数値（ピクセル単位）を取得・設定するために使用されます。このプロパティを活用することで、JavaScriptから動的に動画要素の表示サイズを制御できるようになります。 構文heightプロパティの構文は以下のとおりです。 height値の取得（ピクセル単位）mediaObject.height height値の設定（ピクセル単位）mediaObject.height = number それでは、Video heightプロパティの具体的な使用例を見ていきましょう。 サンプルコード<!DOCTYPE h

  2. HTML DOMのWindow closedプロパティとは？使い方とサンプルコードを解説

    HTML DOMのWindow closedプロパティは、ウィンドウが閉じられているかどうかの状態を示す真偽値（boolean）を返します。ウィンドウがすでに閉じている場合はtrue、まだ開いている場合はfalseが返されます。このプロパティは、window.open()で開いたポップアップウィンドウの状態を監視したり、ユーザーによって閉じられたウィンドウを再オープンするかどうかを判定したりする際に非常に便利です。構文Window closedプロパティの構文は以下の通りです。window.closed戻り値：true（ウィンドウが閉じている場合）／ false（ウィンドウが開いている場合）サ