Matokeo ya display ya style

Ufafanuzi na matumizi

display Matokeo ya uwezo wa kumkinga au kumhakikisha matokeo ya muonekano wa kiwango.

Mifano ya HTML inayofanana kwa 'inline' au 'block': mifano ya inline yana matokeo ya kufupishwa kwa kusha kwa kusha. Mifano ya block yana kufikia eneo lake kwa kusha, kwa sababu kwa kusha kwa kusha haikweonekani kwa kusha kwenye kusha kingine.

display kipimo cha kina kinaweza kumonisha na kushika kipimo cha kina. Iliwekani kwa kipimo cha muonekano. Lakini, kama inapostawiwa display:none, itakushika kipimo cha kina kipya, na visibility:hidden inaangalia kwamba kiumepekeo cha kina kinaweza kumwengwa, lakini kiumepekeo cha kina kinahifadhiwa kwa eneo lake wa asili na ukubwa.

Mwongozo:Kama elementi ni kipimo cha kina, inaweza kuingiza kipimo cha kina kwa kutumia kipimo cha float.

Tazama pia:

Makala ya CSS:CSS Display na visibility

Makala ya CSS:kipimo cha kina

mifano

matokeo 1

Kuingiza <div> bila muonekano:

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

Try it yourself

matokeo 2

kilele cha kipimo cha kina na kipimo cha muonekano cha kina:

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

Try it yourself

matokeo 3

kikaa kwa kushika na kuonyesha kipimo cha kina:

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

Try it yourself

matokeo 4

kielezo cha "inline" na "block" na "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

matokeo 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>), with no 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 does not display.
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

Msaada wa kusimama

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Msaada Msaada Msaada Msaada Msaada