Atrybut wyświetlania Style

Definicja i użycie

display Ustawianie lub zwracanie typu wyświetlania elementu.

Większość elementów HTML jest „wierszowym” lub „blokowym”: elementy wierszowe mają zawartość pływającą po lewej i prawej stronie.

display atrybut również pozwala autorowi na wyświetlanie lub ukrywanie elementu. Podobnie jak atrybut visibility, ale jeśli ustawiony display:none, ukryje cały element, podczas gdy visibility:hidden Oznacza to, że zawartość elementu będzie niewidoczna, ale element będzie utrzymywał swoją oryginalną pozycję i rozmiar.

Wskazówka:Jeśli element jest elementem blokowym, można również zmienić jego typ wyświetlania za pomocą atrybutu float.

Zobacz również:

Kurs CSS:CSS Display i visibility

Podręcznik CSS:Atrybut display

Przykład

Przykład 1

Ustawienie, aby element <div> nie był widoczny:

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

Try it yourself

Przykład 2

Różnica między atrybutem display a visibility:

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

Try it yourself

Przykład 3

Przełączanie między ukrywanym i widocznym elementem:

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

Try it yourself

Przykład 4

Różnica między "inline", "block" a "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

Przykład 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 with :before and :after pseudo-elements. 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 representing the display type of the element.
CSS version: CSS1

Wsparcie przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wspierane Wspierane Wspierane Wspierane Wspierane