Style visibility egenskab

Definition og brug

visibility Egenskaben sætter eller returnerer, om elementet skal være synligt.

visibility Egenskaben tillader forfatteren at vise eller skjule elementer.

Denne egenskab ligner display-egenskabenmen forskellen er, hvis du sætter display:nonedet vil skjule hele elementet, men visibility:hidden Betyder, at elementets indhold ikke vil være synligt, men elementet vil beholde sin oprindelige placering og størrelse.

Se også:

CSS Tutorial:CSS Display og visibility

CSS Reference Manual:visibility-egenskaben

Eksempel

Eksempel 1

Skjul indholdet af <p>-elementet:

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

Prøv det selv

Flere eksempler findes nedenfor på siden.

Syntaks

Returner visibility-egenskaben:

object.style.visibility

Indstil visibility-egenskaben:

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

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 (the 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: A string that indicates 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";
}

Prøv det selv

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';
  }
}

Prøv det selv

Example 4

Hide and show <img> elements:

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

Prøv det selv

Example 5

Return the visibility type of the <p> element:

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

Prøv det selv