Style display Property

Exemple

Définir un <div> élément à ne pas afficher:

document.getElementById("myDIV").style.display = "none";

Définition et utilisation

Les ensembles de propriétés d'affichage ou retourne le type d'affichage de l'élément.

Les éléments en HTML sont pour la plupart "inline" en "block" "inline" ou "block" éléments: un élément en ligne a flottant contenu sur son côté gauche et à droite. Un élément de bloc remplit toute la ligne, et rien ne peut être affiché sur le côté gauche ou à droite.

La propriété d'affichage permet également l'auteur pour afficher ou masquer un élément. Il est similaire à la visibilité des biens. Toutefois, si vous définissez display: none, il cache l'élément entier, tandis que visibility: hidden signifie que le contenu de l'élément sera invisible, mais l'élément reste dans sa position initiale et la taille.

Tip: Si un élément est un élément de bloc, son type d'affichage peut également être modifié avec la propriété float.

Support du navigateur

La propriété d'affichage est pris en charge dans tous les principaux navigateurs.

Syntaxe

Retourne la propriété d'affichage:

object .style.display

Définissez la propriété d'affichage:

object .style.display= Valeurs de propriété

Valeur	La description
block	L'élément est rendu sous la forme d'un élément de type bloc
compact	L'élément est rendu sous la forme d'un bloc de niveau ou d'un élément en ligne. Dépend du contexte
flex	Élément est rendu comme une boîte flex niveau du bloc. Nouveau dans CSS3
inherit	La valeur de la propriété d'affichage est héritée de l'élément parent
inline	L'élément est rendu sous la forme d'un élément en ligne. Ce défaut est
inline-block	L'élément est rendu sous la forme d'une boîte de bloc à l'intérieur d'une boîte en-ligne
inline-flex	Élément est rendu comme une boîte flex niveau en ligne. Nouveau dans CSS3
inline-table	Élément est rendu sous la forme d'une table en ligne (comme <table>), sans saut de ligne avant ou après la table
list-item	Élément est rendu sous la forme d'une liste
marker	Cette valeur définit le contenu avant ou après une boîte pour être un marqueur (utilisé avec: avant et. Après les pseudo-éléments Sinon, cette valeur est identique à « en ligne »)
none	Élément ne sera pas affiché
run-in	L'élément est rendu sous la forme de type bloc ou d'un élément en ligne. Dépend du contexte
table	L'élément est rendu sous la forme d'une table de blocs (comme <table>), avec un saut de ligne avant et après la table
table-caption	Élément est rendu comme une légende de la table (comme <caption>)
table-cell	Élément est rendu comme une cellule de table (comme <td> et <th>)
table-column	L' élément est rendu sous la forme d' une colonne de cellules (like <col>)
table-column-group	L' élément est rendu sous la forme d' un groupe d'une ou plusieurs colonnes (like <colgroup>)
table-footer-group	Élément est rendu comme une ligne de pied de page de table (like <tfoot>)
table-header-group	L' élément est rendu sous la forme d' une rangée d' en- tête de table (like <thead>)
table-row	L'élément est rendu sous la forme d'une ligne de la table (comme <tr>)
table-row-group	L' élément est rendu sous la forme d' un groupe d'une ou plusieurs lignes (like <tbody>)
initial	Définit cette propriété à sa valeur par défaut. Lisez à propos initial
inherit	Hérite cette propriété de son élément parent. En savoir plus sur hériteront

Détails techniques

Valeur par défaut:	en ligne
Valeur de retour:	Une chaîne représentant le type d'affichage d'un élément
version CSS	CSS1

autres exemples

Exemple

La 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";
}

Essayez vous - même »

Exemple

Différence entre "inline" en "block" "none" "inline" , "block" et "none" :

function myFunction(x) {
    var whichSelected = x.selectedIndex;
    var sel = x.options[whichSelected].text;
    var elem = document.getElementById("mySpan");
    elem.style.display = sel;
}

Essayez vous - même »