L'attribut de visibilité en CSS est utilisé pour définir si un élément est visible. Vous pouvez utiliser cet attribut avec JavaScript pour créer des menus ou des mises en page Web très complexes. Par exemple, lorsque vous répondez à des questions de test sur une page Web, vous pouvez utiliser la visibilité. attribut pour modifier les réponses aux questions ou masquer l'analyse et l'afficher si nécessaire.
Les valeurs possibles pour l'attribut de visibilité sont les suivantes :
Exemple:
1.visible
Utilisation visible (par défaut)
Puisque la valeur de la propriété par défaut est affichée. Les trois petites cases sont donc affichées.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>div{width:100px ;hauteur:100px;}.on e{background-color:palegreen;}.two{background-color:palevioletred;}.trois{background-color:papayawhip;}</style></head><body><div></div><div> </div><div></div></body></html>Résultats en cours d'exécution :
2.caché
Lorsque nous définissons la première petite case pour qu'elle ne s'affiche pas (visibilité : cachée ;), la deuxième petite case occupe toujours sa position d'origine.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>div{width:100px ;hauteur:100px;}.one{backgro und-color:palegreen;visibility:hidden;}.two{background-color:palevioletred;}.trois{background-color:papayawhip;}</style></head><body><div></div>< div></div><div></div></body></html>Résultats en cours d'exécution :
Remarque : Une fois que la visibilité masque l'élément, il continue d'occuper sa position d'origine.
Si l'élément masqué veut sa position d'origine, utilisez visibilité:hidden
Si l'élément masqué ne veut pas sa position d'origine, utilisez display:none
3.hériter
Exemple:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>.one,.two ,.trois{largeur:100px;hauteur:100px;}.one{couleur de fond:vert pâle;}.deux{b couleur d'arrière-plan:palevioletred;}.trois{couleur d'arrière-plan:papayawhip;}.quatre,.cinq{largeur:50px;hauteur:50px;couleur d'arrière-plan:bleu poudré;}</style></head><corps>< div><div></div></div><div><div></div></div><div></div></body></html>Résultats en cours d'exécution :
Lors de l'utilisation de la valeur de l'attribut hériter.
(1) Étant donné que la première grande boîte verte est configurée pour ne pas être affichée, la petite boîte bleue de la première boîte hérite de l'attribut caché de la grande boîte et n'est pas affichée.
(2) La deuxième petite case bleue hérite de l'attribut d'affichage par défaut visible de la grande case rose, elle est donc affichée.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>.one,.two ,.two{width:100px;height:100px;}.one{background-color:palegreen;visibility:hidde n;}.two{background-color:palevioletred;}.trois{background-color:papayawhip;}.four,.five{width:50px;height:50px;background-color:powderblue;}</style></ tête><corps><div><div></div></div><div><div></div></div><div></div></body></html>Résultats en cours d'exécution :
