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：親要素の設定を継承。
サンプル
サンプル要素１
サンプル要素２
サンプル要素３
サンプル要素４
サンプル要素の変更後の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>
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;">
サンプル要素１
</div>
<div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
サンプル要素２
</div>
<div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
サンプル要素３
</div>
<div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
サンプル要素４
</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>
<div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
サンプル要素１
</div>
<div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
サンプル要素２
</div>
<div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
サンプル要素３
</div>
<div style="border: 1px solid blue; background-color: pink; width: 198px; height: 98px;">
サンプル要素４
</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>