Style display egenskap

Definition och användning

display Egenskapsinställningar eller återgivning av elementets visningstyp.

HTML-element är för det mesta "inlinje" eller "block" element: inlinje-element har flytande innehåll både till vänster och höger.

display egenskapen tillåter författaren att visa eller dölja element. Det liknar visibility-attributet. Men om inställningen är display:none, det döljer hela elementet och visibility:hidden betyder att elementets innehåll inte kommer att vara synligt, men elementet kommer att behålla sin ursprungliga position och storlek.

Tips:Om elementet är ett blockelement kan också dess displaytyp ändras genom float-attributet.

Se också:

CSS-tutorial:CSS Display och visibility

CSS-referenshandboken:display-attributet

Exempel

Exempel 1

Ställ in att inte visa <div>-element:

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

Try it yourself

Exempel 2

Skillnaden mellan display-attributet och visibility-attributet:

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

Try it yourself

Exempel 3

Växla mellan att dölja och visa element:

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

Try it yourself

Exempel 4

Skillnaden mellan "inline", "block" och "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

Exempel 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 flexbox. 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 flexbox. 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

Used together with the :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: A string representing the display type of the element.
CSS version: CSS1

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd