Propriété visibility du style

Définition et utilisation

visibility La propriété définit ou renvoie si l'élément doit être visible.

visibility La propriété permet à l'auteur de montrer ou de cacher un élément.

Cette propriété est similaire à Propriété display。Mais contrairement à cela, si vous définissez display:none，elle masquera l'élément entier, tandis que visibility:hidden Cela signifie que le contenu de l'élément ne sera pas visible, mais l'élément conservera sa position et sa taille d'origine.

Veuillez également consulter :

Tutoriel CSS :CSS Display et visibility

Manuel de référence CSS :Propriété visibility

Exemple

Exemple 1

Masquer le contenu de l'élément <p> :

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

Essayer personnellement

Plus d'exemples sont fournis en bas de la page.

Syntaxe

Renvoyer la propriété visibility :

object.style.visibility

Définir la propriété visibility :

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

Valeur de l'attribut

Valeur Description
visible L'élément est visible. Par défaut.
hidden L'élément est invisible, mais il influence toujours le布局.
collapse Lorsqu'il est utilisé sur une ligne ou une cellule de tableau, l'élément est invisible (comme "hidden").
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Détails techniques

Valeur par défaut : visible
Valeur de retour : Chaîne, indiquant si l'élément est affiché ou non.
Version CSS : CSS2

Support des navigateurs

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

Plus d'exemples

Exemple 2

La différence entre les attributs display et visibility :

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

Essayer personnellement

Exemple 3

Basculer entre masquer et afficher les éléments :

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

Essayer personnellement

Exemple 4

Masquer et afficher l'élément <img> :

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

Essayer personnellement

Exemple 5

Renvoie le type de visibilité de l'élément <p> :

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

Essayer personnellement