display
設定是否呈現物件。
語法
{ display: sDisplay }
可能的值
sDisplay
指定或接收下列其中一個值的字串:
inline |
預設值。物件會呈現為內嵌元素,並根據內容尺寸調整大小。 |
block |
物件會呈現為區塊元素。 |
inline-block |
物件會呈現為內嵌,但物件內容會呈現為區塊元素。相鄰的內嵌元素在空間允許的情況下會在同一行呈現。 |
list-item |
物件會呈現為區塊元素,並且會新增清單項目標記。適用於 Microsoft Internet Explorer 6 及更新版本。 |
none |
不呈現物件。 |
table-footer-group |
在所有其他列和列群組之後,以及在底部標題之前,一律會顯示表格頁尾。表格所跨越的每一頁都會顯示頁尾。 |
table-footer-group |
在所有其他列和列群組之前,以及在頂端標題之後,一律會顯示表格頁首。表格所跨越的每一頁都會顯示頁首。 |
對於所有物件,此屬性的預設值為 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 |
XMP |
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">
標準資訊
此屬性是在階層式樣式表 (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