Style display 屬性
描述
display 屬性設定或返回元素的顯示型別。
HTML 中的元素大多是“內聯”或“塊級”元素：內聯元素在其左右兩側有浮動內容。塊級元素佔據整行，其左右兩側不能顯示任何內容。
display 屬性還允許作者顯示或隱藏元素。它與 visibility 屬性類似。但是，如果設定 display:none，它會隱藏整個元素，而 visibility:hidden 意味著元素的內容將不可見，但元素仍保留其原始位置和大小。
提示：如果元素是塊級元素，其顯示型別也可以透過 float 屬性更改。
瀏覽器支援
| 屬性 | |||||
|---|---|---|---|---|---|
| display | 是 | 是 | 是 | 是 | 是 |
語法
返回 display 屬性
object.style.display
設定 display 屬性
object.style.display = 值
屬性值
| 值 | 描述 |
|---|---|
| block | 元素呈現為塊級元素 |
| compact | 元素呈現為塊級或內聯元素。取決於上下文 |
| flex | 元素呈現為塊級彈性盒。CSS3 新增 |
| grid | 元素呈現為塊級網格。CSS3 新增 |
| inherit | 從其父元素繼承此屬性。閱讀關於 inherit |
| initial | 將此屬性設定為其預設值。閱讀關於 initial |
| inline | 元素呈現為內聯元素。這是預設值 |
| inline-block | 元素呈現為內聯盒內的塊級盒 |
| inline-flex | 元素呈現為內聯彈性盒。CSS3 新增 |
| inline-grid | 元素呈現為內聯網格。CSS3 新增 |
| 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>） |
技術詳情
| 預設值 | inline |
|---|---|
| 返回值 | 一個字串，表示元素的顯示型別 |
| 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';
}
}
自己動手試一試 »
示例
"inline"、"block" 和 "none" 之間的區別
function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS Display 和 visibility
CSS 參考：display 屬性
