Style visibility ominaisuus

Määritelmä ja käyttö

visibility Ominaisuus asettaa tai palauttaa, onko elementti näkyvä.

visibility Ominaisuus mahdollistaa kirjoittajan näyttää tai piilottaa elementin.

Tämä ominaisuus on samanlainen display-ominaisuus。Mutta erona on, jos asetetaan display:none，se piilottaa koko elementin mutta visibility:hidden Tämä tarkoittaa, että elementin sisältö ei ole näkyvää, mutta elementti säilyttää alkuperäisen sijainnin ja koon.

Lisäksi suositeltavaa:

CSS opas：CSS Display ja näkyvyys

CSS 参考手册：visibility 属性

实例

例子 1

隐藏 <p> 元素的内容：

document.getElementById("myP").style.visibility = "hidden";

Kokeile itse

页面下方提供更多实例。

语法

返回 visibility 属性：

object.style.visibility

设置 visibility 属性：

object.style.visibility = "visible|hidden|collapse|initial|inherit"

Ominaisuusarvo

Arvo Kuvaus
visible Tämä elementti on näkyvä. Oletusarvo.
hidden Elementti on näkymätön, mutta se vaikuttaa silti asetteluun.
collapse Käytettäessä taulukon riveillä tai soluilla, elementti on näkymätön (sama kuin "hidden").
initial Aseta tämä ominaisuus sen oletusarvoon. Katso initial.
inherit Periisi tämä ominaisuus vanhemmalta elementiltä. Katso inherit.

Tekninen yksityiskohta

Oletusarvo: visible
Palautusarvo: Merkkijono, joka ilmaisee elementin näkyvyyden.
CSS-versio: CSS2

Selaimen tuki

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

Lisää esimerkkejä

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.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

Kokeile itse

Esimerkki 4

Piilota ja näytä <img> -elementti:

function hideElem() {
  document.getElementById("myImg").style.visibility = "hidden"; 
}
function showElem() {
  document.getElementById("myImg").style.visibility = "visible"; 
}

Kokeile itse

Esimerkki 5

Palauta <p> -elementin näkyvyyslaji:

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

Kokeile itse