Style display 属性

定義と用法

display 属性は要素の表示形式を設定または返します。

HTMLの要素は主に「行内」または「ブロック」要素です：行内要素の左側と右側には浮動する内容があります。ブロック要素は一つの行を満たし、その左側または右側には他の内容を表示することができません。

display 属性も作者が要素の表示や非表示を制御できるようにします。これは visibility 属性に似ていますが、 display:noneは要素全体を隠しますが、 visibility:hidden これは要素の内容が不可視になることを意味し、要素はその元の位置と大きさを保持します。

ヒント：要素がブロック要素の場合、float 属性を通じて表示形式を変更することもできます。

も参照してください：

CSS タイプ：CSS Display と visibility

CSS リファレンスマニュアル：display 属性

インスタンス

例 1

要素を非表示にする <div> 元素の設定：

document.getElementById("myDIV").style.display = "none";

実際に試してみてください

例 2

display 属性と visibility 属性の違い：

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

実際に試してみてください

例 3

要素の表示と非表示の切り替え：

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

実際に試してみてください

例 4

"inline"、"block" そして "none" の違い：
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

実際に試してみてください

例 5

<p>要素の表示形式を返します：

alert(document.getElementById("myP").style.display);

実際に試してみてください

文法

display 属性を返す：

object.style.display

display 属性を設定する：

object.style.display = value

属性値

値 説明
block 要素はブロック要素としてレンダリングされます。
compact 要素はブロック要素またはインライン要素として表示されます。文脈によって異なります。
flex 要素はブロックフレックスボックスとして表示されます。CSS3の新しい機能。
inline 要素はインライン要素として表示されます。デフォルト。
inline-block 要素はインラインフレックス内のブロックボックスとして表示されます。
inline-flex 要素はインラインフレックスボックスとして表示されます。CSS3の新しい機能。
inline-table 要素はインラインテーブルとして表示されます（例：<table>）、テーブルの前後には改行符がありません。
list-item 要素はリストとして表示されます。
marker

none 要素は表示されません。
run-in 要素はブロック要素またはインライン要素として表示されます。文脈によって異なります。
table 要素はブロックテーブル（block table）（例：<table>）として表示され、テーブルの前後には改行符があります。
table-caption 要素はテーブルのキャプションとして表示されます（例：<caption>）。
table-cell 要素はテーブルのセルとして表示されます（例：<td> と <th>）。
table-column 要素はセル列として表示されます（例：<col>）。
table-column-group 要素は一列または複数列のグループとして表示されます（例：<colgroup>）。
table-footer-group 要素はテーブルのフッタ行として表示されます（例：<tfoot>）。
table-header-group 要素はテーブルのヘッダ行として表示されます（例：<thead>）。
table-row 要素はテーブル行として表示されます（例：<tr>）。
table-row-group 要素は一行または複数行のグループとして表示されます（例：<tbody>）。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： inline
返り値： 文字列、要素の表示形式を示します。
CSS バージョン： CSS1

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート