Style display attribute

Paglilinaw at paggamit

display Ang pagtatakda o pagbabalik ng display type ng elemento.

Ang mga elemento sa HTML ay karamihan ay “inline” o “block” elemento: ang bawat baba ng inline elemento ay mayroong floating content sa kanyang kaliwa at kanan.

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

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

另请参阅：

CSS 教程：CSS Display 和 visibility

CSS 参考手册：display 属性

实例

Eli 1

设置不显示 <div> 元素：

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

Subukan ang iyong sarili

Eli 2

display 属性和 visibility 属性的区别：

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

Subukan ang iyong sarili

Eli 3

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

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

Subukan ang iyong sarili

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

Subukan ang iyong sarili

Eli 5

Ibubunga ang uri ng pagpapakita ng <p> elemento:

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

Subukan ang iyong sarili

Mga gramatika

Ibubunga ang katangian ng display:

object.style.display

Itatakda ang katangian ng display:

object.style.display = value

Halimbawa ng katangian

Halimbawa ng paglalarawan Paglalarawan
block Ang elemento ay pinapakita bilang isang bloke elemento.
compact Ang elemento ay nagpapakita bilang isang bloke o inline na elemento. Nagbubunga nang nakikita ang konteksto.
flex Ang elemento ay nagpapakita bilang isang bloke level box model. Bagong katangian ng CSS3.
inline Ang elemento ay nagpapakita bilang isang inline na elemento. Default.
inline-block Ang elemento ay nagpapakita bilang isang bloke box sa loob ng inline box.
inline-flex Ang elemento ay nagpapakita bilang isang inline level box model. Bagong katangian ng CSS3.
inline-table Ang elemento ay nagpapakita bilang isang inline table (tulad ng <table>), walang halipot na linya bago at pagkatapos ng talahanapan.
list-item Ang elemento ay nagpapakita bilang isang listahan.
marker

Ang halimbawa na ito ay nagtatakda ng nilalaman bago o pagkatapos ng kahon bilang tag (marker).

Ginagamit kasama ang :before at :after pseudo-element. Sa ibang paraan, ang halimbawa na ito ay katulad ng "inline".
none Ang elemento ay hindi ipapakita.
run-in Ang elemento ay nagpapakita bilang isang bloke o inline na elemento. Nagbubunga nang nakikita ang konteksto.
table Ang elemento ay nagpapakita bilang isang bloke talahanapan (block table) (tulad ng <table>), may halipot na linya bago at pagkatapos ng talahanapan.
table-caption Ang elemento ay nagpapakita bilang isang pamagat ng talahanapan (tulad ng <caption>).
table-cell Ang elemento ay nagpapakita bilang isang cell ng talahanapan (tulad ng <td> at <th>).
table-column Ang elemento ay nagpapakita bilang isang kolumna ng cell (tulad ng <col>).
table-column-group Ang elemento ay nagpapakita bilang isang grupo ng kolumna (tulad ng <colgroup>).
table-footer-group Ang elemento ay nagpapakita bilang isang linya ng pugad ng talahanapan (tulad ng <tfoot>).
table-header-group Ang elemento ay nagpapakita bilang isang linya ng pamagat ng talahanapan (tulad ng <thead>).
table-row Ang elemento ay nagpapakita bilang isang linya ng talahanapan (tulad ng <tr>).
table-row-group Ang elemento ay nagpapakita bilang isang linya o ilang mga linya na grupo (tulad ng <tbody>).
initial Itatakan ang katangian na ito sa kanyang default na halimbawa. Tingnan ang initial.
inherit Inuminan ng kanyang magulang na elemento ang katangian na ito. Tingnan ang inherit.

Teknikal na detalye

Default na halimbawa: inline
Halimbawa ng pagbubunga: String, kumakatawan sa uri ng pagpapakita ng elemento.
CSS ersion: CSS1

Browser Support

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