Visibilité du style Propriété
Exemple
Masquez le contenu d'un élément <p> :
document.getElementById("myP").style.visibility = "hidden";
Définition et utilisation
La propriété de visibilité définit ou renvoie si un élément doit être visible.
La propriété de visibilité permet à l'auteur d'afficher ou de masquer un élément. Elle est similaire à la propriété display . Cependant, la différence est que si vous définissez display:none, il masque l'élément entier, tandis que visibility:hiddensignifie que le contenu de l'élément sera invisible, mais l'élément restera dans sa position et sa taille d'origine.
Prise en charge du navigateur
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Syntaxe
Renvoie la propriété de visibilité :
object.style.visibility
Définissez la propriété de visibilité :
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Valeurs de propriété
| Value | Description |
|---|---|
| visible | The element is visible. This is default |
| hidden | The element is not visible, but still affects layout |
| collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Détails techniques
| Valeur par défaut: | visible |
|---|---|
| Valeur de retour : | Une chaîne, représentant si le contenu d'un élément est affiché ou non |
| Version CSS | CSS2 |
Plus d'exemples
Exemple
Différence entre la propriété d'affichage et la propriété de visibilité :
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Exemple
Basculer entre masquer et afficher un élément :
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Exemple
Masquez et affichez un élément <img> :
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Exemple
Renvoie le type de visibilité d'un élément <p> :
alert(document.getElementById("myP").style.visibility);
Pages connexes
Tutoriel CSS : Affichage et visibilité CSS
Référence CSS : propriété de visibilité
❮ Objet de style