Attribut display du style

Définition et utilisation

display Définit ou retourne le type d'affichage de l'élément.

Les éléments dans HTML sont généralement de type "inline" ou "block" : les éléments inline ont du contenu flottant à leur gauche et à leur droite. Les éléments block remplissent toute la ligne et ne laissent pas apparaître de contenu à leur gauche ou à leur droite.

display l'attribut permet également à l'auteur de montrer ou de cacher l'élément. Il est similaire à l'attribut visibility. Cependant, si l'attribut display:nonemasque tout l'élément, 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.

Astuce :Si l'élément est un élément en bloc, vous pouvez également modifier son type d'affichage via l'attribut float.

Voir également :

Tutoriel CSS :CSS Display et visibility

Manuel CSS :Attribut display

Exemple

Exemple 1

Régler pour ne pas afficher l'élément <div> :

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

Essayez-le vous-même

Exemple 2

Les différences entre les attributs display et visibility :

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

Essayez-le vous-même

Exemple 3

Basculer entre l'élément caché et visible :

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

Essayez-le vous-même

Exemple 4

Les différences entre "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-le vous-même

Exemple 5

Retourner le type d'affichage de l'élément <p> :

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

Essayez-le vous-même

Syntaxe

Retourner l'attribut display :

object.style.display

Définir l'attribut display :

object.style.display = value

Valeur de l'attribut

Valeur Description
block L'élément est rendu comme un élément en bloc.
compact L'élément est présenté comme un élément en bloc ou en ligne. Cela dépend du contexte.
flex L'élément est présenté comme un conteneur en bloc de flexbox. Nouvelle fonctionnalité de CSS3.
inline L'élément est présenté comme un élément en ligne. Par défaut.
inline-block L'élément est présenté comme un cadre en ligne de boîtes en bloc.
inline-flex L'élément est présenté comme un conteneur en ligne de flexbox. Nouvelle fonctionnalité de CSS3.
inline-table L'élément est présenté comme un tableau en ligne (comme <table>), sans retour à la ligne avant et après le tableau.
list-item L'élément est présenté comme une liste.
marker

Cette valeur définit le contenu avant ou après le cadre comme un marqueur (marker)

Utilisé avec les pseudo-éléments :before et :after. Sinon, cette valeur est la même que "inline".
none L'élément n'est pas affiché.
run-in L'élément est présenté comme un élément en bloc ou en ligne. Cela dépend du contexte.
table L'élément est présenté comme un tableau en bloc (comme <table>), avec des retours à la ligne avant et après le tableau.
table-caption L'élément est présenté comme une légende de tableau (comme <caption>).
table-cell L'élément est présenté comme une cellule de tableau (comme <td> et <th>).
table-column L'élément est présenté comme une colonne de cellules (comme <col>).
table-column-group L'élément est présenté comme un groupe de colonnes ou de colonnes multiples (comme <colgroup>).
table-footer-group L'élément est présenté comme une ligne de pied de tableau (comme <tfoot>).
table-header-group L'élément est présenté comme une ligne d'en-tête de tableau (comme <thead>).
table-row L'élément est présenté comme une ligne de tableau (comme <tr>).
table-row-group L'élément est présenté comme un groupe de lignes ou de lignes multiples (comme <tbody>).
initial Définit cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits cette propriété de son élément parent. Voir inherit.

Détails techniques

Valeur par défaut : inline
Valeur de retour : Chaîne, représentant le type d'affichage de l'élément.
Version de CSS : CSS1

Support du navigateur

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