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

JavaScriptで要素の高さを設定する方法をわかりやすく解説

JavaScriptで要素の高さを設定するには、style.heightプロパティを使用します。このプロパティに対して「100px」のような値（単位付き）を代入することで、指定した要素の高さを動的に変更できます。

基本的な使い方

以下のように、document.getElementById()で対象の要素を取得し、そのstyle.heightに希望する高さを設定します。

document.getElementById("myID").style.height = "100px";

サンプルコード

ボタンをクリックすると、ボタン自身の高さが100pxに変更される実例です。実際に動作を確認してみてください。

<!DOCTYPE html>
<html>
  <body>
    <h1>見出し1</h1>
    <p>これはデモ用のテキストです。</p>
    <button type="button" id="myID" onclick="display()">高さを変更する</button>
    <script>
      function display() {
        document.getElementById("myID").style.height = "100px";
      }
    </script>
  </body>
</html>

ポイントと注意点

単位を忘れずに指定する

style.heightに設定する値は、「px」「%」「em」「vh」などのCSS単位を含めた文字列で指定する必要があります。数値だけを渡すと正しく反映されないので注意しましょう。

最小高さ・最大高さの制御も可能

高さだけでなく、style.minHeight（最小高さ）やstyle.maxHeight（最大高さ）を使えば、レスポンシブ対応などで要素の高さに上下限を持たせることもできます。

CSSとの優先順位に注意

JavaScriptからstyle.heightを設定すると、インラインスタイルとして適用されるため、外部スタイルシートのheight指定より優先されます。意図しない表示になるときは、既存のCSS設定や!importantの有無を確認してください。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. JavaScriptで要素の最大の高さを設定する方法｜maxHeightプロパティの使い方

    ```html JavaScriptで要素の最大の高さを制限するには、maxHeightプロパティを使用します。このプロパティに値を設定すると、コンテンツの量にかかわらず、要素が指定した高さ以上に伸びるのを防ぐことができます。基本構文element.style.maxHeight = "70px";実装例以下のサンプルでは、「Max Height」ボタンをクリックすると、id="box" のdiv要素に対して最大の高さ 70px が設定されます。あらかじめ overflow: auto; を指定しているため、コンテンツが最大高さを超えた場合にはスクロール