display

Hérité : non   -   Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1

L'aspect le plus courant de la propriété de style display dans DHTML consiste à configurer les scripts de sorte qu'ils basculent entre l'affichage et le masquage complet de l'élément et de son espace. Lorsque la propriété a pour valeur none, l'élément est masqué et tous les contenus avoisinants sont redimensionnés pour remplir l'espace qu'il occuperait normalement.

Ceci est à distinguer de la propriété visibility qui réserve un espace pour l'élément même si ce dernier n'est pas affiché. Cependant, pour restaurer le mode d'affichage par défaut de l'élément, vous pouvez attribuer l'un des types d'affichage courant (block et inline) ou le type plus spécifique de l'élément (par exemple, list-item pour un élément li), s'il est pris en charge par vos navigateurs cibles.

Dans le même temps, la propriété display vous permet de remplacer le comportement d'affichage par défaut des éléments. Un élément de type "en-ligne" peut alors se comporter comme un élément "bloc" et vice-versa (voir Eléments bloc et en-ligne). Grace à cette propriété, n'importe quel élément peut également se comporter comme une partie de tableau.

Syntaxe CSS
display: valeur
Valeur(s) possible(s) pour cette propriété :

Les spécifications CSS identifient divers types d'affichages, mais la prise en charge des navigateurs est plus limitée. Le tableau suivant indique les types pris en charge.

Type d'affichageIE/WindowsIE/MacCSS
block542
compacts.os.o2
inline542
inline-block5.5s.os.o
inline-tables.o52
list-item552
markers.os.o2
none442
run-ins.o52
tables.o52
table-captions.o52
table-cells.o52
table-column-groups.o52
table-footer-group5.552
table-header-group552
table-rows.o52
table-row-groups.o52
Valeur initiale

Fonction de l'élément.

Exemple
.hidden {display: none}
S'applique à 

Tous les éléments (mais certains types d'affichage s'appliquent à des éléments spécifiques).

Javascript
[window.]document .getElementById("elementID") .style .display

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index




Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web


Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.


Valid HTML 4.01 Transitional
Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu