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

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

clientHeightプロパティとは

HTML DOMのclientHeightプロパティは、HTML要素の「表示可能な高さ（可視領域の高さ）」を取得するために使用されます。この高さにはパディング（padding）が含まれますが、境界線（border）、スクロールバー、マージン（margin）は含まれません。

また、要素からコンテンツがあふれている場合でも、返される値はあくまでその要素自体の高さです。あふれたコンテンツ分の高さは計算に含まれない点に注意しましょう。

clientHeightは次のように計算されます。

CSS height ＋ CSS padding － border － スクロールバー（水平方向）－ margin

構文（シンタックス）

clientHeightプロパティの構文は以下のとおりです。

element.clientHeight

使用例

ここで、HTML DOMのclientHeightプロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
#styleDIV {
    height: 250px;
    padding: 10px;
    margin: 15px;
    border: 2px solid blue;
    background-color: lightgreen;
    text-align:center;
}
</style>
</head>
<body>
<p>下のボタンをクリックすると、パディングを含むdivの高さを取得できます。</p>
<button onclick="heightDiv()">GET HEIGHT</button>
<div id="styleDIV">
<b>サンプルのdiv要素</b>
</div>
<p id="Sample"></p>
<script>
    function heightDiv() {
        var x = document.getElementById("styleDIV");
        var txt = "パディングを含む高さ = " + x.clientHeight ;
        document.getElementById("Sample").innerHTML = txt;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

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

「GET HEIGHT」ボタンをクリックすると、次のようにdiv要素の高さが表示されます。

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

コードの解説

この例では、まずid「styleDIV」を持つdiv要素を作成し、そのidに対してスタイルを適用しています。

#styleDIV {
    height: 250px;
    padding: 10px;
    margin: 15px;
    border: 2px solid blue;
    background-color: lightgreen;
    text-align:center;
}
<div id="styleDIV">
<b>サンプルのdiv要素</b>
</div>

次に、クリックされるとheightDiv()メソッドを実行する「GET HEIGHT」ボタンを作成しています。

<button onclick="heightDiv()">GET HEIGHT</button>

heightDiv()関数では、getElementById()メソッドを使用してdiv要素を取得し、変数xに代入します。続いて、div要素に対してclientHeightプロパティを使うことで高さを取得し、説明用のテキストを連結したうえで変数txtに格納します。最後に、段落要素のinnerHTMLプロパティに変数txtを代入することで、取得したテキストを画面に表示しています。

function heightDiv() {
    var x = document.getElementById("styleDIV");
    var txt = "パディングを含む高さ = " + x.clientHeight ;
    document.getElementById("Sample").innerHTML = txt;
}

まとめ

clientHeightプロパティは、パディングを含み、border・スクロールバー・マージンを除外した要素の高さを整数値（ピクセル単位）で返します。同様のプロパティとして、幅を取得するclientWidthや、スクロール可能な領域全体の高さを取得するscrollHeightなどもあります。用途に応じてこれらを使い分けることで、要素のサイズを正確に把握できます。

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

    HTML DOM offsetHeightプロパティの概要HTML DOMのoffsetHeightプロパティは、要素の高さに対応する数値を返します。この値には、パディング（padding）、ボーダー（border）、スクロールバーが含まれますが、マージン（margin）は含まれません。要素が画面上で実際に占める高さを取得したい場合に非常に便利なプロパティです。レイアウト計算や、要素のサイズに応じた動的な処理を行う際によく使われます。構文数値を返す場合の基本的な構文は以下の通りです。HTMLelement.offsetHeight戻り値はピクセル単位の整数値（Number型）として返されます。

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

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