Style display 屬性

Style 對象參考手冊 Style 對象

定義和用法

display 屬性設置或返回元素的顯示類型。

HTML 中的元素大多是"內聯"或"塊"元素：一個內聯元素，在其左側和右側都是浮動內容。一個塊元素填滿整個行，並沒有什麼可顯示在其左側或右側。

display 屬性還允許作者顯示或隱藏一個元素。與 visibility 屬性類似。然而，如果您設置 display:none，將隱藏整個元素，如果您設置 visibility:hidden，元素的內容將不可見，但元素保持原來的位置和大小。

語法

設置 display 屬性：

Object.style.display="value"

返回 display 屬性：

Object.style.display

值 描述
block 元素呈現為塊級元素。
compact 元素呈現為塊級元素或內聯元素，取決於上下文。
inherit display 屬性的值從父元素繼承。
inline 默認。元素呈現為內聯元素。
inline-block 元素呈現為內聯盒子內的塊盒子。
inline-table 元素呈現為內聯表格（類似 <table>），表格前後沒有換行符。
list-item 元素呈現為列表。
marker 該值在盒子前後設置內容作為標記（與 :before 和 :after 偽元素一起使用，否則該值與 "inline" 是相同的）。
none 元素不會被顯示。
run-in 元素呈現為塊級或內聯元素，取決於上下文。
table 元素呈現為塊級表格（類似 <table>），表格前後帶有換行符。
table-caption 元素呈現為表格標題（類似 <caption>）。
table-cell 元素呈現為表格單元格（類似 <td> 和 <th>）。
table-column 元素呈現為單元格的列（類似 <col>）。
table-column-group 元素呈現為一個或多個列的分組（類似 <colgroup>）。
table-footer-group 元素呈現為表格頁腳行（類似 <tfoot>）。
table-header-group 元素呈現為表格頁眉行（類似 <thead>）。
table-row 元素呈現為表格行（類似 <tr>）。
table-row-group 元素呈現為一個或多個行的分組（類似 <tbody>）。

流覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要流覽器都支持 display 屬性。

注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有規定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。

提示和注釋

提示：如果元素時塊元素，它的顯示類型可通過 float 屬性改變。

實例

實例

當點擊按鈕時設置元素不可見：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT研修(xuhuhu.com)</title>
<script>
function demoDisplay(){
    document.getElementById("p1").style.display="none";
}
function demoVisibility(){
    document.getElementById("p2").style.visibility="hidden";
}
</script>
</head>
<body>

<p id="p1">這是一些文本。</p>
<p id="p2">這是一些文本。</p>
<input type="button" onclick="demoDisplay()" value="隱藏顯示屬性的文本">
<input type="button" onclick="demoVisibility()" value="具有可見性屬性的隱藏文本">

</body>
</html>


Style 對象參考手冊 Style 對象