JavaScript HTML DOM Style display 属性

display 属性

display属性设置或返回元素的显示类型。HTML中的元素主要是“内联”或“块”元素：内联元素的左侧和右侧都有浮动内容。块元素填充整行，左侧或右侧不显示任何内容。display属性还允许作者显示或隐藏元素。它类似于visibility属性。但是，如果设置display:none，它会隐藏整个元素，同时visibility:hidden意味着元素的内容将不可见，但元素保持其原始位置和大小。

提示：如果元素是块元素，则还可以使用float属性更改其显示类型。

设置div元素不显示：

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

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
display	支持	支持	支持	支持	支持

语法

返回display属性：

object.style.display

设置display属性：

object.style.display = value

属性值

值	描述
block	元素呈现为块级元素
compact	元素呈现为块级或内联元素。取决于背景
flex	元素呈现为块级弹性框。 CSS3中的新功能
inline	元素呈现为内联元素。这是默认值
inline-block	元素呈现为内联框内的块框
inline-flex	元素呈现为内联级弹性框。 CSS3中的新功能
inline-table	元素呈现为内联表（如<table>），在表之前或之后没有换行符
list-item	元素呈现为列表
marker	此值将框之前或之后的内容设置为标记（用于:brfore和:after伪元素。否则此值与“内联”相同）
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>）
initial	将此属性设置为其默认值。阅读有关initial信息
inherit	从其父元素继承此属性。阅读有关inherit的信息

技术细节

项目	描述
默认值：	inline
返回值：	一个字符串，表示元素的显示类型
CSS版本	CSS1

更多例子

显示属性和可见性属性之间的差异：

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

尝试一下

返回p元素的显示类型：

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

尝试一下

JavaScript HTML DOM Style display 属性

display 属性

浏览器支持

语法

属性值

技术细节

更多例子

相关页面