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

JavaScriptで要素の表示タイプ（display）を設定する方法を解説

JavaScriptで要素の表示タイプを設定するには、display プロパティを使用します。このプロパティはCSSの display に対応しており、要素の表示形式を動的に変更できます。

特に、要素を非表示にしたい場合は none を指定します。display: none; が設定された要素は、画面上から完全に消え、レイアウト上のスペースも占有しなくなります。

displayプロパティの主な値

  • block：前後で改行されるブロックレベル要素として表示
  • inline：文章の一部としてインライン表示
  • inline-block：インライン配置ながら幅や高さを指定可能
  • none：要素を非表示にする（スペースも確保されない）

サンプルコード

以下のコードでは、ボタンをクリックすると style.display に none を設定し、指定した要素が非表示になります。

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID {
      width: 250px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>
<body>
  <button onclick="display()">非表示にする（display: none）</button>
  <div id="myID">
    <h1>デモ用の見出し（h1）</h1>
    これはデモ用のテキストです。これはデモ用のテキストです。
  </div>
  <script>
    function display() {
      document.getElementById("myID").style.display = "none";
    }
  </script>
</body>
</html>

コードの解説

document.getElementById() でID「myID」を持つ要素を取得し、その style.display プロパティに "none" を代入しています。ボタンがクリックされると display() 関数が実行され、緑色のdiv要素が画面から消えます。

なお、再び要素を表示したい場合は、style.display = "block" のように適切な値を設定すればOKです。また、単純に見た目だけを消したい場合は visibility プロパティを使う方法もあります。こちらは要素のスペースを保持したまま非表示にできるのが特徴です。

  1. JavaScriptで要素の下マージン（margin-bottom）を設定する方法

    JavaScriptで要素の下マージンを設定するには、marginBottom プロパティを使用します。このプロパティは、CSSの margin-bottom に対応しており、要素のスタイルオブジェクト（style）を通じて動的に値を変更できます。marginBottom プロパティの基本構文element.style.marginBottom = 値;値には px、%、em などの単位を付けた文字列を指定します。例えば 95px のように設定します。サンプルコード以下のコードでは、ボタンをクリックすると段落要素の下マージンが95pxに設定されます。実際にブラウザで実行して動作を確認してみてく

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

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