Style d'affichage Propriété
Exemple
Définissez un élément <div> à ne pas afficher :
document.getElementById("myDIV").style.display = "none";
Définition et utilisation
La propriété display définit ou renvoie le type d'affichage de l'élément.
Les éléments en HTML sont pour la plupart des éléments « en ligne » ou « blocs » : un élément en ligne a un contenu flottant sur ses côtés gauche et droit. Un élément de bloc remplit toute la ligne et rien ne peut être affiché sur son côté gauche ou droit.
La propriété display permet également à l'auteur d'afficher ou de masquer un élément. Elle est similaire à la propriété de visibilité . Cependant, si vous définissez display:none
, il masque l'élément entier, tandis que visibility:hidden
signifie que le contenu de l'élément sera invisible, mais l'élément restera dans sa position et sa taille d'origine.
Astuce : Si un élément est un élément bloc, son type d'affichage peut également être modifié avec la propriété float.
Prise en charge du navigateur
Property | |||||
---|---|---|---|---|---|
display | Yes | Yes | Yes | Yes | Yes |
Syntaxe
Renvoyez la propriété d'affichage :
object.style.display
Définissez la propriété d'affichage :
object.style.display = value
Valeurs de propriété
Value | Description |
---|---|
block | Element is rendered as a block-level element |
compact | Element is rendered as a block-level or inline element. Depends on context |
flex | Element is rendered as a block-level flex box. New in CSS3 |
inline | Element is rendered as an inline element. This is default |
inline-block | Element is rendered as a block box inside an inline box |
inline-flex | Element is rendered as a inline-level flex box. New in CSS3 |
inline-table | Element is rendered as an inline table (like <table>), with no line break before or after the table |
list-item | Element is rendered as a list |
marker | This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline") |
none | Element will not be displayed |
run-in | Element is rendered as block-level or inline element. Depends on context |
table | Element is rendered as a block table (like <table>), with a line break before and after the table |
table-caption | Element is rendered as a table caption (like <caption>) |
table-cell | Element is rendered as a table cell (like <td> and <th>) |
table-column | Element is rendered as a column of cells (like <col>) |
table-column-group | Element is rendered as a group of one or more columns (like <colgroup>) |
table-footer-group | Element is rendered as a table footer row (like <tfoot>) |
table-header-group | Element is rendered as a table header row (like <thead>) |
table-row | Element is rendered as a table row (like <tr>) |
table-row-group | Element is rendered as a group of one or more rows (like <tbody>) |
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: | en ligne |
---|---|
Valeur de retour : | Une chaîne, représentant le type d'affichage d'un élément |
Version CSS | CSS1 |
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.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Exemple
Différence entre "en ligne", "bloquer" et "aucun":
function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
Exemple
Renvoie le type d'affichage d'un élément <p> :
alert(document.getElementById("myP").style.display);
Pages connexes
Tutoriel CSS : Affichage et visibilité CSS
Référence CSS : propriété d'affichage
❮ Objet de style