Display-Attribut des Stils

Definition und Verwendung

display Eigenschaften, die die Anzeigetypen der Elemente einstellen oder zurückgeben.

Die Elemente in HTML sind hauptsächlich „inline“ oder „block“ Elemente: Inline-Elemente haben浮动内容 auf beiden Seiten. Block-Elemente füllen die gesamte Zeile aus und können auf der linken oder rechten Seite keine Inhalte anzeigen.

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

提示：如果元素是块元素，也可以通过 float 属性更改其显示类型。

另请参阅：

CSS 教程：CSS Display 和 visibility

CSS 参考手册：display 属性

实例

Beispiel 1

设置不显示 <div> 元素：

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

Try it yourself

Beispiel 2

display 属性和 visibility 属性的区别：

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

Try it yourself

Beispiel 3

在隐藏和显示元素之间切换：

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

Try it yourself

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

Try it yourself

Beispiel 5

Return the display type of the <p> element:

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

Try it yourself

Syntax

Return the display property:

object.style.display

Set the display property:

object.style.display = value

Attribute value

Value Description
block The element is rendered as a block-level element.
compact The element is presented as a block-level or inline element. It depends on the context.
flex The element is presented as a block-level flexible box. A new feature in CSS3.
inline The element is presented as an inline element. Default.
inline-block The element is presented as a block box within an inline box.
inline-flex The element is presented as an inline-level flexible box. A new feature in CSS3.
inline-table The element is presented as an inline table (such as <table>), without line breaks before and after the table.
list-item The element is presented as a list.
marker

This value sets the content before or after the box to be a marker (marker)

Used together with the pseudo-elements :before and :after. Otherwise, this value is the same as "inline".
none The element is not displayed.
run-in The element is presented as a block-level or inline element. It depends on the context.
table The element is presented as a block table (block table) (such as <table>), with line breaks before and after the table.
table-caption The element is presented as a table caption (such as <caption>).
table-cell The element is presented as a table cell (such as <td> and <th>).
table-column The element is presented as a cell column (such as <col>).
table-column-group The element is presented as a group of one or more columns (such as <colgroup>).
table-footer-group The element is presented as a table footer row (such as <tfoot>).
table-header-group The element is presented as a table header row (such as <thead>).
table-row The element is presented as a table row (such as <tr>).
table-row-group The element is presented as a group of one or more lines (such as <tbody>).
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: inline
Return value: String, which represents the display type of the element.
CSS Version: CSS1

Browser-Unterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung