HTML DOM Styleのheightプロパティとは?使い方とサンプルコードを解説
HTML DOM の Style オブジェクトが持つ height プロパティは、要素の高さを設定したり、現在設定されている高さの値を取得したりするために使用されます。JavaScript から動的に要素の高さを変更したい場合に非常に便利なプロパティです。
heightプロパティの構文
height プロパティを設定する際の基本的な構文は以下の通りです。
object.style.height = "auto|length|%|initial|inherit";
指定できる値の一覧
height プロパティには、以下の値を指定することができます。
| 値 | 説明 |
|---|---|
| auto | デフォルト値です。ブラウザが自動的に計算した高さが適用されます。 |
| length | px や em などの長さの単位を使って、具体的な高さを指定します。 |
| % | 親要素の高さに対する相対的な割合(パーセンテージ)で高さを指定します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
heightプロパティの使用例
それでは、実際に height プロパティを使用したサンプルコードを見てみましょう。ボタンをクリックすると、1つ目の div 要素の高さが 200px に変更される例です。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
width:100px;
height:100px;
background-color:lightpink;
}
#demo2 {
margin-top:4px;
width:100px;
height:100px;
background-color:coral;
}
</style>
<script>
function changeHeight() {
document.getElementById("demo1").style.height = "200px";
document.getElementById("Sample").innerHTML = "1つ目のdivの高さが100px増加しました";
}
</script>
</head>
<body>
<div id="demo1">DIV1</div>
<div id="demo2">DIV2</div>
<p>下のボタンをクリックすると、上のdiv要素の高さが変わります</p>
<button onclick="changeHeight()">Change Height</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示すると、ピンク色(lightpink)の DIV1 と コーラル色(coral)の DIV2 が、どちらも 100px × 100px のサイズで縦に並んで表示されます。
ここで「Change Height」ボタンをクリックすると、JavaScript の changeHeight() 関数が呼び出され、DIV1 の高さが 200px に変更されます。同時に、メッセージも画面に表示されます。
まとめ
HTML DOM の Style height プロパティを使えば、JavaScript から要素の高さを動的に操作できます。単位付きの数値(px など)だけでなく、親要素との相対値(%)や auto、inherit など柔軟な指定方法が用意されており、レスポンシブな UI やインタラクティブな演出を実装する際に役立ちます。
-
HTML DOM スタイルの textDecorationColor プロパティとは？使い方を解説
DOM のスタイル textDecorationColor プロパティは、HTML ドキュメント内の要素に適用されたテキスト装飾（下線・取り消し線など）の色を取得および変更するために使用されます。テキストに下線や取り消し線などの装飾が設定されている場合、このプロパティを使うことで、その装飾線だけの色を個別に指定できます。構文textDecorationColor プロパティの基本的な構文は以下のとおりです。値を取得する場合object.style.textDecorationColor値を変更する場合object.style.textDecorationColor = color「color」
-
HTML DOM Styleのheightプロパティとは?使い方とサンプルコードを解説
HTML DOM の Style オブジェクトが持つ height プロパティは、要素の高さを設定したり、現在設定されている高さの値を取得したりするために使用されます。JavaScript から動的に要素の高さを変更したい場合に非常に便利なプロパティです。 heightプロパティの構文 height プロパティを設定する際の基本的な構文は以下の通りです。 object.style.height = auto|length|%|initial|inherit; 指定できる値の一覧 height プロパティには、以下の値を指定することができます。 値説明 autoデフォルト値です。ブラ