Style display-eigenschap

Definitie en gebruik

display Eigenschappen instellen of teruggeven van het weergavetype van het element.

De elementen in HTML zijn meestal 'inline' of 'block'-elementen: inline-elementen hebben zowel links als rechts浮动内容. Block-elementen vullen een hele rij, en er kan geen inhoud aan de linkerkant of rechterkant worden weergegeven.

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

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

另请参阅：

CSS 教程：CSS Display 和 visibility

CSS 参考手册：display 属性

实例

Voorbeeld 1

设置不显示 <div> 元素：

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

Probeer het zelf

Voorbeeld 2

display 属性和 visibility 属性的区别：

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

Probeer het zelf

Voorbeeld 3

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

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

Probeer het zelf

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

Probeer het zelf

Voorbeeld 5

Geef het weergavetype van het <p>-element terug:

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

Probeer het zelf

Syntax

Geef de display-eigenschap terug:

object.style.display

Stel de display-eigenschap in:

object.style.display = waarde

Eigenschapswaarde

Waarde Beschrijving
block Het element wordt weergegeven als een blokkastelelement.
compact Het element wordt weergegeven als een blokkastelelement of een inline-element. Afhankelijk van de context.
flex Het element wordt weergegeven als een blokkastelelement. Een nieuwe functie in CSS3.
inline Het element wordt weergegeven als een inline-element. Standaard.
inline-block Het element wordt weergegeven als een blokkastelelement in een inline-box.
inline-flex Het element wordt weergegeven als een inline-statische box. Een nieuwe functie in CSS3.
inline-table Het element wordt weergegeven als een inline-tabel (zoals <table>), zonder newline voor en achter de tabel.
list-item Het element wordt weergegeven als een lijst.
marker

Deze waarde stelt de inhoud voor of achter de box in als een marker (marker)

Gebruikt samen met de pseudoelementen :before en :after. Anders is deze waarde hetzelfde als "inline".
none Het element wordt niet weergegeven.
run-in Het element wordt weergegeven als een blokkastelelement of een inline-element. Afhankelijk van de context.
table Het element wordt weergegeven als een bloktabel (block table) (zoals <table>), met een newline voor en achter de tabel.
table-caption Het element wordt weergegeven als een tabelkop (zoals <caption>).
table-cell Het element wordt weergegeven als een tabelcel (zoals <td> en <th>).
table-column Het element wordt weergegeven als een celkolom (zoals <col>).
table-column-group Het element wordt weergegeven als een groep van een of meerdere kolommen (zoals <colgroup>).
table-footer-group Het element wordt weergegeven als een tabelvoetrij (zoals <tfoot>).
table-header-group Het element wordt weergegeven als een tabelkoprij (zoals <thead>).
table-row Het element wordt weergegeven als een tabelrij (zoals <tr>).
table-row-group Het element wordt weergegeven als een groep van een of meerdere regels (zoals <tbody>).
initial Deze eigenschap ingesteld op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap erfgenomen van de ouder-element. Raadpleeg inherit.

Technische details

Standaardwaarde: inline
Retourwaarde: String, die het weergavetype van het element aangeeft.
CSS versie: CSS1

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support