Style display 屬性

定義和用法

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

HTML 中的元素大多是“行內”或“塊”元素：行內元素的左側和右側都有浮動內容。塊元素填滿整行，其左側或右側不能顯示任何內容。

display 屬性還允許作者顯示或隱藏元素。它類似于 visibility 屬性。但是，如果設置 display:none，它會隱藏整個元素，而 visibility:hidden 意味著元素的內容將不可見，但元素會保持其原始位置和大小。

提示：如果元素是塊元素，也可以通過 float 屬性更改其顯示類型。

另請參閱：

CSS 教程：CSS Display 和 visibility

CSS 參考手冊：display 屬性

實例

例子 1

設置不顯示 <div> 元素：

document.getElementById("myDIV").style.display = "none";

親自試一試

例子 2

display 屬性和 visibility 屬性的區別：

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

親自試一試

例子 3

在隱藏和顯示元素之間切換：

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

親自試一試

例子 4

"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;
}

親自試一試

例子 5

返回 <p> 元素的顯示類型：

alert(document.getElementById("myP").style.display);

親自試一試

語法

返回 display 屬性：

object.style.display

設置 display 屬性：

object.style.display = value

屬性值

值 描述
block 元素被渲染為塊級元素。
compact 元素呈現為塊級或行內元素。取決于上下文。
flex 元素呈現為塊級彈性框。CSS3 中的新特性。
inline 元素呈現為行內元素。默認。
inline-block 元素呈現為行內框中的塊框（block box）。
inline-flex 元素呈現為行內級彈性框。CSS3 中的新特性。
inline-table 元素呈現為行內表格（如 <table>），表格前后沒有換行符。
list-item 元素呈現為列表。
marker

此值將框之前或之后的內容設置為標記（marker）

與 :before 和 :after 偽元素一起使用。否則此值與 "inline"相同。
none 元素不會顯示。
run-in 元素呈現為塊級或行內元素。取決于上下文。
table 元素呈現為塊表（block 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>）。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： inline
返回值： 字符串，表示元素的顯示類型。
CSS 版本： CSS1

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持