Style visibility-attributet

Definition och användning

visibility Attributet ställer in eller returnerar om elementet ska vara synligt.

visibility Attributet tillåter författaren att visa eller dölja element.

Detta attribut liknar display-attributetmen skillnaden är att om du ställer in display:nonedet kommer att dölja hela elementet, medan visibility:hidden Det innebär att elementets innehåll inte kommer att vara synligt, men elementet kommer att behålla sin ursprungliga position och storlek.

Se också:

CSS Lär dig:CSS Display och visibility

CSS Referenshandbok:visibility-attributet

Exempel

Exempel 1

Göm innehållet i <p>-elementet:

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

Prova själv

Mer exempel på nederst på sidan.

Syntax

Returnera visibility-attributet:

object.style.visibility

Ställ in visibility-attributet:

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 the 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 indicating whether the content of 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

The difference between the display property and the visibility property:

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

Prova själv

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

Prova själv

Example 4

Hide and show <img> elements:

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

Prova själv

Example 5

Return the visibility type of the <p> element:

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

Prova själv