Style visibility-eigenschap

Definitie en gebruik

visibility De eigenschap stelt in of herstelt of een element zichtbaar moet zijn.

visibility De eigenschap staat toe dat de auteur elementen weergeeft of verbergt.

Deze eigenschap is vergelijkbaar met display-eigenschapanders is, als je display:noneHet zal het hele element verbergen, terwijl visibility:hidden Dit betekent dat de inhoud van het element niet zichtbaar zal zijn, maar het element zal zijn oorspronkelijke positie en grootte behouden.

Zie ook:

CSS Handleiding:CSS Display en visibility

CSS Referentiehandleiding:Visibility-eigenschap

Voorbeeld

Voorbeeld 1

Verberg de inhoud van het <p>-element:

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

Try it yourself

Meer voorbeelden zijn beschikbaar onder de pagina.

Syntax

Geef de visibility-eigenschap terug:

object.style.visibility

Stel de visibility-eigenschap in:

object.style.visibility = "zichtbaar|verborgen|invalide|oorspronkelijk|geërfd"

Attribute value

Value Description
visible The element is visible. Default.
hidden The element is not visible, but still affects layout.
collapse When used on table rows or cells, the element is not visible (same as "hidden").
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: visible
Return value: String indicating whether the element is displayed.
CSS version: CSS2

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

More examples

Example 2

Difference between display property and visibility property:

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

Try it yourself

Example 3

Toggle between hiding and showing elements:

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

Try it yourself

Example 4

Hide and show <img> elements:

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

Try it yourself

Example 5

Return the visibility type of the <p> element:

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

Try it yourself