display

設定是否呈現物件。

語法

{ display: sDisplay }

可能的值

sDisplay

指定或接收下列其中一個值的字串：

block	物件會呈現為區塊元素。
box	物件會呈現為區塊層級的彈性方塊元素。
inline	預設值。物件會呈現為內嵌元素，並根據內容尺寸調整大小。
inline-block	物件會呈現為內嵌，但物件內容會呈現為區塊元素。相鄰的內嵌元素在空間允許的情況下會在同一行呈現。
inline-box	物件會呈現為內嵌的彈性方塊元素。
list-item	物件會呈現為區塊元素，並且會新增清單項目標記。
none	不呈現物件。
table	物件會呈現為表格。
table-caption	物件會呈現為 caption 。
table-cell	物件會呈現為 td 或 th (依據物件在表格內的位置而定)。
table-column	物件會呈現為 col 。
table-column-group	物件會呈現為 colgroup 。
table-footer-group	在所有其他列和列群組之後，以及在底部標題之前，一律會顯示表格頁尾。表格所跨越的每一頁都會顯示頁尾。
table-header-group	在所有其他列和列群組之前，以及在頂端標題之後，一律會顯示表格頁首。表格所跨越的每一頁都會顯示頁首。
table-row	物件會呈現為 tr 。
table-row-group	物件會呈現為 tbody 。

對於所有物件，此屬性的預設值為 inline ，但有下列例外：

address	block	blockquote	block	body	block
center	block	col	block	colgroup	block
dd	block	dir	block	div	block
dl	block	dt	block	fieldset	block
form	block	frame	none	hn	block
hr	block	iframe	block	legend	block
li	list-item	listing	block	menu	block
ol	block	p	block	plaintext	block
pre	block	table	block	tbody	none
td	block	tfoot	none	th	block
thead	none	tr	block	ul	block
xml	block

此屬性不是繼承屬性。

備註

所有可見的 HTML 物件 都是區塊或內嵌。例如，DIV 物件是區塊元素，而 SPAN 物件則是內嵌元素。區塊元素通常會開始新行，而且可以包含其他區塊元素和內嵌元素。內嵌元素通常不會開始新行，而且可以包含其他內嵌元素或資料。變更 display 屬性的值會以下列方式影響周圍內容的版面配置：

• 在具有 block 值的元素之後增加新的一行。

• 從具有 inline 值的元素中移除一行。

• 隱藏具有 none 值之元素的資料。

相較於 visibility 屬性， display=none 不會保留空間給螢幕上的物件。

table-header-group 和 table-footer-group 值可以用來指定 thead 和 tfoot 物件的內容會在跨越多頁之表格的每一頁顯示。

範例

此範例會顯示 display 屬性的值變更為 inline 、block 和 none 時的效果：

<span id=ospan>This is a span</span> in a sentence.
<p>
<input type=button value ="Block" onclick="ospan.style.display='block'">
:

此範例使用函式呼叫來隱藏或顯示表格列與儲存格：

<script>
function getPets()
{
    oRow1Cell2.style.display="none";
    oRow2Cell2.style.display="block";
    oRow3Cell2.style.display="none";
}
</script>
:
<table>
<tr id="oRow1"><td>Horses</td>
<td id="oRow1Cell2">Thoroughbreds</td>
<td>Fast</td></tr>
<tr id="oRow2"><td>Dogs</td>
<td id="oRow2Cell2">Greyhounds</td>
<td>Fast</td></tr>
<tr id="oRow3"><td>Marsupials</td>
<td id="oRow3Cell2">Opossums</td>
<td>Slow</td></tr>
</table>
:
<input type=button onclick="getPets()" value ="Show household pets">

標準資訊

您可以在 Cascading Style Sheets (CSS), Level 1 (CSS1) (階層式樣式表 (CSS) 層級 1 (CSS1))  找到此屬性的定義。

適用範圍

a, abbr, acronym, address, applet, b, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, frame, hn, hr, html, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, p, q, rt, ruby, s, select, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp

另請參閱

概念

float-offset

其他資源

::slot