Η ιδιότητα display του style

Ορισμός και χρήση

display

Τα στοιχεία του HTML είναι κυρίως

display ιδιότητα επιτρέπει στον συγγραφέα να εμφανίσει ή να κρύψει το στοιχείο. Αναφέρεται επίσης στην ιδιότητα visibility. Αλλά αν οριστεί display:noneθα κρύψει το ολόκληρο το στοιχείο, ενώ visibility:hidden προσδιορίζει ότι το περιεχόμενο του στοιχείου θα είναι μη ορατό, αλλά το στοιχείο θα διατηρήσει την αρχική του θέση και μέγεθος.

Συμβουλή:Αν το στοιχείο είναι στοιχείο μπλοκ, μπορεί επίσης να αλλάξει τον τύπο εμφάνισης του μέσω της ιδιότητας float.

Για περισσότερες πληροφορίες:

Εκμάθηση CSS:CSS Display και visibility

Χρήματολόγιο CSS:Ιδιότητα display

Παράδειγμα

Παράδειγμα 1

Ρύθμιση μη εμφάνισης του στοιχείου <div>:

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

Try it yourself

Παράδειγμα 2

Η διαφορά μεταξύ των ιδιοτήτων display και visibility:

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

Try it yourself

Παράδειγμα 3

Αλλαγή μεταξύ κρυψής και εμφάνισης στοιχείων:

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

Try it yourself

Παράδειγμα 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;
}

Try it yourself

Παράδειγμα 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. 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. 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 that represents the display type of an element.
CSS version: CSS1

Υποστήριξη Browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη