Propati visibility ya style

Mifano na matumizi

visibility Propati inasababisha kwa kipengele kwa kuwa inavyotumika.

visibility Propati inaondoa au inahifadhi kipengele kwa kuwa inavyotumika.

Propati hii inahusika na Propati display. Lakini kwa jinsi tofauti, kama inatumika display:none, inakumbuka kipengele kipchele kote, na visibility:hidden Inamaanisha kwamba upeo wa kipengele kinahitajika kuwa bila yaone, lakini kipengele kinahifadhi upeo wake wa asili na ukubwa.

Tazama pia:

Mafunzo ya CSS:CSS Display na visibility

Mifano ya CSS:Propati visibility

Mifano

Mifano 1

Kimaisha kwa upeo wa kipengele <p>:

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

Jifunze tena

Mifano yote ya mawasiliano huzingatia chini.

Mifano

Ruhusu visibility propati:

object.style.visibility

Mwaka kwa visibility propati:

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

Wazitoa tabia

Wazitoa Maelezo
visible Elementi inaonekana. Chaguo cha kuzingatia.
hidden Elementi haionekani, lakini inaathiri vizuizi ya muonekano.
collapse Kivumilia katika mazingira ya tabia ya jinga au sikuwa "hidden".
initial Kuweka tabia hii kwa chaguo cha kuzingatia. Angalia: initial.
inherit Kuweka tabia hii kuanzia elementi ya baba. Angalia: inherit.

Maelezo ya teknolojia

Chaguo cha kuzingatia: visible
Matokeo: Taa, inaeleza kwamba elementi inaonekana au haionekani.
Muungano wa CSS: CSS2

Mawasiliano wa kivumilia

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Mawasiliano Mawasiliano Mawasiliano Mawasiliano Mawasiliano

Mafanikio mengi

Mfano 2

Muongo wa display na muongo wa visibility:

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

Jifunze tena

Mfano 3

Chagua kati ya kufikia na kuondoa elementi:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

Jifunze tena

Mfano 4

Fikia na kuondoa elementi ya <img>:

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

Jifunze tena

Mfano 5

Ruhusu <p> jina la muonekano wa muonekano:

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

Jifunze tena