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
支持 支持 支持 支持 支持