display

設定是否呈現物件。

語法

{ display:sDisplay}

可能的值

sDisplay

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

block

物件會呈現為區塊元素。

box

物件會呈現為區塊層級的彈性方塊元素。

inline

預設值。物件會呈現為內嵌元素,並根據內容尺寸調整大小。

inline-block

物件會呈現為內嵌,但物件內容會呈現為區塊元素。相鄰的內嵌元素在空間允許的情況下會在同一行呈現。

inline-box

物件會呈現為內嵌的彈性方塊元素。

list-item

物件會呈現為區塊元素,並且會新增清單項目標記。

none

不呈現物件。

table

物件會呈現為表格。

table-caption

物件會呈現為 caption

table-cell

物件會呈現為 tdth (依據物件在表格內的位置而定)。

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-grouptable-footer-group 值可以用來指定 theadtfoot 物件的內容會在跨越多頁之表格的每一頁顯示。

範例

此範例會顯示 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)) Ee371238.xtlink_newWindow(zh-tw,Expression.40).png 找到此屬性的定義。

適用範圍

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