Style display -ominaisuus

Määrittely ja käyttö

display Atribuutit asettavat tai palauttavat elementin näyttötyypin.

HTML:n elementit ovat yleensä "rivi"- tai "lohko"-elementtejä: rivi-elementtien vasen ja oikea puoli sisältävät liikkuvaa sisältöä.

display -ominaisuus sallii kirjoittajan näyttää tai piilottaa elementin. Se on samanlaista kuin visibility-ominaisuus. Mutta jos asetetaan display:none, se piilottaa koko elementin ja visibility:hidden Tämä tarkoittaa, että elementin sisältö on näkymätöntä, mutta elementti säilyttää alkuperäisen sijainnin ja koon.

Vinkki:Jos elementti on blokki-elementti, sen näyttötyyppiä voidaan myös muuttaa float-ominaisuuksien avulla.

Katso myös:

CSS-opas:CSS Display ja visibility

CSS-oppaasti:display-ominaisuus

Esimerkki

Esimerkki 1

Aseta <div>-elementin näkymättömäksi:

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

Kokeile itse

Esimerkki 2

display- ja visibility-ominaisuuksien ero:

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

Kokeile itse

Esimerkki 3

Vaihda elementin piilottamisen ja näyttämisen välillä:

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

Kokeile itse

Esimerkki 4

"inline"、"block" ja "none" -erojen ero:
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

Kokeile itse

Esimerkki 5

Palauta <p> -elementin näyttötapa:

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

Kokeile itse

Syntaksi

Palauta display ominaisuus:

object.style.display

Aseta display ominaisuus:

object.style.display = value

Ominaisuuden arvo

Arvo Kuvaus
block Elementti esitetään lohkkeena.
compact Elementti esitetään lohkkeena tai rivinä olevana elementtinä. riippuen kontekstista.
flex Elementti esitetään lohkkeena olevana joustavuuslippuna. CSS3:n uusi ominaisuus.
inline Elementti esitetään rivinä olevana elementtinä. Oletus.
inline-block Elementti esitetään lohkkeena olevana lohkkeen sisällä.
inline-flex Elementti esitetään rivinä olevana joustavuuslippuna. CSS3:n uusi ominaisuus.
inline-table Elementti esitetään rivinä olevana taulukkona (esim. <table>), taulukon ympärillä ei ole uudelleenrivitysmerkkiä.
list-item Elementti esitetään luettelona.
marker

Tämä arvo asettaa merkinnän (marker) ennen tai jälkeen merkinnän sisällön.

Käytetään yhdessä :before- ja :after-seudoelementtien kanssa. Muussa tapauksessa tämä arvo on sama kuin "inline".
none Elementti ei näy.
run-in Elementti esitetään lohkkeena tai rivinä olevana elementtinä. riippuen kontekstista.
table Elementti esitetään lohkotaulukkona (block table) (esim. <table>), taulukon ympärillä on uudelleenrivitysmerkki.
table-caption Elementti esitetään taulukkopäätteinä (esim. <caption>).
table-cell Elementti esitetään taulukkosoluna (esim. <td> ja <th>).
table-column Elementti esitetään soluna olevana sarakkeena (esim. <col>).
table-column-group Elementti esitetään sarakkeina olevana ryhmänä (esim. <colgroup>).
table-footer-group Elementti esitetään taulukkopalkkirivinä (esim. <tfoot>).
table-header-group Elementti esitetään taulukkopäätön rivinä (esim. <thead>).
table-row Elementti esitetään taulukkorivinä (esim. <tr>).
table-row-group Elementti esitetään riveinä tai useissa riveissä olevana ryhmänä (esim. <tbody>).
initial Aseta tämä ominaisuus sen oletusarvoon. Katso myös initial.
inherit Periisi elementistä tämän ominaisuuden arvon. Katso myös inherit.

Tekninen tarkistus

Oletusarvo: inline
Palautusarvo: Merkkihajonta, joka ilmaisee elementin näyttötavan.
CSS versio: CSS1

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki