style.displayプロパティ

style.displayは、要素のスタイル属性のdisplayプロパティの値を取得、もしくは、設定するプロパティ。

displayプロパティは、要素の表示形式を指定することができる。

インライン要素をブロックレベル表示したり、ブロック要素をインライン表示したり、リスト項目形式で表示したりできる。

構文

取得

var $display = $elementReference.style.display;

戻り値

要素のスタイル属性のdisplayプロパティの値。

設定

$elementReference.style.display = "value";
value
表示形式を指定。
下記の何れかの値を指定する。初期設定値は「inline」。
  • none:非表示。
  • block:ブロック表示。
  • inline:インライン表示。
  • inline-block:インライン・ブロック表示。インラインのように並べるが、ブロックレベル要素のように幅や高さなどを指定できる。
  • list-item:LI要素のようなリスト項目表示。
  • marker:リストマーカー表示。「:before擬似要素」、「:after擬似要素」と一緒に使う。「:before擬似要素」、「:after擬似要素」と一緒に使わない場合、「inline」を指定した場合と同じになる。
  • table:TBALE要素のようなテーブル表示。
  • inline-table:インラインレベルのテーブル表示。
  • table-caption:テーブルにタイトルを付加するCAPTION(キャプション)要素のような表示。
  • table-cell:テーブルのセル(TD要素)のような表示。
  • table-column:テーブルのCOL要素のような表示。
  • table-column-group:テーブルのCOLGROUP要素のような表示。
  • table-row:テーブルのTR要素のような表示。
  • table-row-group:テーブルのTBODY要素のような表示。
  • table-header-group:テーブルのTHEAD要素のような表示。
  • table-footer-group:テーブルのTFOOT要素のような表示。
  • run-in:コンテキスト(文脈)によりブロック表示かインライン表示かを決定。
  • compact:コンテキスト(文脈)によりブロック表示かインライン表示かを決定。
  • inherit:親要素の設定を継承。

サンプル

サンプル要素1
サンプル要素2
サンプル要素3
サンプル要素4




サンプル要素の変更後のdisplayプロパティの値:

サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストをdisplayプロパティの値に設定し、設定値を「サンプル要素の変更後のdisplayプロパティの値:」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setDisplay( $display ) {
 var $elements = document.getElementById( "sample" ).getElementsByTagName( "div" );
 for( $i=0; $i < $elements.length; $i++ ){
  $elements[$i].style.display = $display;
 }
 var $display = $elements[0].style.display;
 document.getElementById( "sampleOutput" ).innerHTML = $display;
}
</script>

HTML

<div id="sample"  style="margin: 20px; width: 500px;">
 <div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
 サンプル要素1
 </div>
 <div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
 サンプル要素2
 </div>
 <div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
 サンプル要素3
 </div>
 <div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
 サンプル要素4
 </div>
</div>
<button onclick="setDisplay('none');">none</button>
<button onclick="setDisplay('block');">block</button>
<button onclick="setDisplay('inline');">inline</button>
<button onclick="setDisplay('inline-block');">inline-block</button>
<button onclick="setDisplay('list-item');">list-item</button>
<br />
<button onclick="setDisplay('table');">table</button>
<button onclick="setDisplay('inline-table');">inline-table</button>
<button onclick="setDisplay('table-caption');">table-caption</button>
<button onclick="setDisplay('table-cell');">table-cell</button>
<br />
<button onclick="setDisplay('table-column');">table-column</button>
<button onclick="setDisplay('table-column-group');">table-column-group</button>
<button onclick="setDisplay('table-row');">table-row</button>
<button onclick="setDisplay('table-row-group');">table-row-group</button>
<br />
<button onclick="setDisplay('table-header-group');">table-header-group</button>
<button onclick="setDisplay('table-footer-group');">table-footer-group</button>
<button onclick="setDisplay('inherit');">継承</button>
<br />
<p>サンプル要素の変更後のdisplayプロパティの値:<span id="sampleOutput"></span></p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, プロパティ, リファレンス, 表示 パーマリンク