码农教程 - 一技在手,衣食无忧! tools

目录

style display 属性

❮上一节 ❮ 样式对象参考 下一节❯

示例

设置一个 <div> 元素不显示：

document.getElementById("myDIV").style.display = "none";
亲自试一试 »

描述

display 属性设置或返回元素的显示类型。

HTML 中的元素大多是 "inline" 或 "block" 元素：内联元素的左侧和右侧都有浮动内容。块元素填满整行，并且其左侧或右侧不能显示任何内容。

display 属性还允许作者显示或隐藏元素。它类似于能见度属性。但是，如果您设置display:none，它隐藏了整个元素，而visibility:hidden意味着元素的内容将不可见，但元素保持其原始位置和大小。

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

浏览器支持

Property
display Yes Yes Yes Yes Yes

语法

返回显示属性：

object.style.display

设置显示属性：

object.style.display = value

属性值

Value Description
block Element is rendered as a block-level element
compact Element is rendered as a block-level or inline element. Depends on context
flex Element is rendered as a block-level flex box. New in CSS3
grid Element is rendered as a block-level grid. New in CSS3
inherit Inherits this property from its parent element. Read about inherit
initial Sets this property to its default value. Read about initial
inline Element is rendered as an inline element. This is default
inline-block Element is rendered as a block box inside an inline box
inline-flex Element is rendered as a inline-level flex box. New in CSS3
inline-grid Element is rendered as a inline-level grid. New in CSS3
inline-table Element is rendered as an inline table (like <table>), with no line break before or after the table
list-item Element is rendered as a list
marker This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline")
none Element will not be displayed
run-in Element is rendered as block-level or inline element. Depends on context
table Element is rendered as a block table (like <table>), with a line break before and after the table
table-caption Element is rendered as a table caption (like <caption>)
table-cell Element is rendered as a table cell (like <td> and <th>)
table-column Element is rendered as a column of cells (like <col>)
table-column-group Element is rendered as a group of one or more columns (like <colgroup>)
table-footer-group Element is rendered as a table footer row (like <tfoot>)
table-header-group Element is rendered as a table header row (like <thead>)
table-row Element is rendered as a table row (like <tr>)
table-row-group Element is rendered as a group of one or more rows (like <tbody>)

技术细节

默认值： 排队
返回值： 一个 String，表示元素的显示类型
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;
}
亲自试一试 »

示例

返回 <p> 元素的显示类型：

alert(document.getElementById("myP").style.display);
亲自试一试 »

相关页面

CSS教程：CSS 显示和可见性

CSS 参考：显示属性


❮上一节 ❮ 样式对象参考 下一节❯