スタイル表示プロパティ

例

表示されないように<div>要素を設定します。

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

定義と使用法

displayプロパティは、要素の表示タイプを設定または返します。

HTMLの要素は、ほとんどが「インライン」または「ブロック」要素です。インライン要素の左側と右側にはフローティングコンテンツがあります。ブロック要素は行全体を埋め、その左側または右側には何も表示できません。

displayプロパティを使用すると、作成者は要素を表示または非表示にすることもできます。これは、可視性プロパティに似ています。ただし、を設定するdisplay:noneと、要素全体が非表示になり、要素visibility:hiddenの内容は非表示になりますが、要素は元の位置とサイズのままになります。

ヒント：要素がブロック要素の場合、その表示タイプはfloatプロパティで変更することもできます。

ブラウザのサポート

Property
display	Yes	Yes	Yes	Yes	Yes

構文

displayプロパティを返します。

object.style.display

displayプロパティを設定します。

object.style.display = value

プロパティ値

Value	Description
block	Element is rendered as a block-level element
compact	Element is rendered as a block-level or inline element. Depends on context
flex	Element is rendered as a block-level flex box. New in CSS3
inline	Element is rendered as an inline element. This is default
inline-block	Element is rendered as a block box inside an inline box
inline-flex	Element is rendered as a inline-level flex box. New in CSS3
inline-table	Element is rendered as an inline table (like <table>), with no line break before or after the table
list-item	Element is rendered as a list
marker	This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline")
none	Element will not be displayed
run-in	Element is rendered as block-level or inline element. Depends on context
table	Element is rendered as a block table (like <table>), with a line break before and after the table
table-caption	Element is rendered as a table caption (like <caption>)
table-cell	Element is rendered as a table cell (like <td> and <th>)
table-column	Element is rendered as a column of cells (like <col>)
table-column-group	Element is rendered as a group of one or more columns (like <colgroup>)
table-footer-group	Element is rendered as a table footer row (like <tfoot>)
table-header-group	Element is rendered as a table header row (like <thead>)
table-row	Element is rendered as a table row (like <tr>)
table-row-group	Element is rendered as a group of one or more rows (like <tbody>)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

技術的な詳細

デフォルト値：	列をなして
戻り値：	要素の表示タイプを表す文字列
CSSバージョン	CSS1

その他の例

例

displayプロパティとvisibilityプロパティの違い：

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

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

例

要素の非表示と表示を切り替えます。

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

例

「インライン」、「ブロック」、「なし」の違い：

function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}

例

<p>要素の表示タイプを返します。

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

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References