Y a-t-il un opposé à afficher: none?

Un vrai contraire à display: none Il n'y en a pas (encore).

, Mais display: unset est très proche et fonctionne dans la plupart des cas.

Depuis MDN (Mozilla Developer Network):

Le mot-clé CSS unset est la combinaison des mots-clés initial et inherit. Comme ces deux autres mots-clés CSS, Il peut être appliqué à n'importe quelle propriété CSS, y compris le raccourci CSS all. Ce mot-clé réinitialise la propriété à sa valeur héritée si elle hérite de sa mère ou à sa valeur initiale si pas. En d'autres termes, il se comporte comme le mot-clé inherit dans le premier cas et comme le mot-clé initial dans le second cas.

(source: https://developer.mozilla.org/docs/Web/CSS/unset)

Notez également que display: revert est en cours de développement. Voir MDN pour plus de détails.

Lors de la modification de l'élément de display en Javascript, dans de nombreux cas, une solution appropriée pour "annuler" le résultat de element.style.display = "none" est element.style.display = "". Cela supprime la déclaration display de l'attribut style, rétablissant la valeur réelle de la propriété display à la valeur définie dans la feuille de style du document (à la valeur par défaut du navigateur si elle n'est pas redéfinie ailleurs). Mais l'approche la plus fiable est d'avoir une classe en CSS comme

.invisible { display: none; }

Et Ajouter / Supprimer ce nom de classe à / depuis element.className.

Vous pouvez utiliser

display: normal;

Cela fonctionne normalement.... C'est un petit piratage en css;)

Comme Paul l'explique, Il n'y a pas d'opposé littéral à display: none en HTML car chaque élément a un affichage par défaut différent et vous pouvez également changer l'affichage avec une classe ou un style en ligne, etc.

Cependant, si vous utilisez quelque chose comme jQuery, leurs fonctions show et hide se comportent comme s'il y avait un opposé de display none. Lorsque vous masquez, puis montrez à nouveau un élément, il s'affichera exactement de la même manière qu'avant qu'il ne soit caché. Ils le font en stockant l'ancienne valeur du afficher la propriété sur le masquage de l'élément de sorte que lorsque vous l'affichez à nouveau, il s'affiche de la même manière qu'avant de le cacher. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Cela signifie que si vous définissez un div par exemple pour afficher inline, ou inline-block et que vous le masquez puis l'affichez à nouveau, il apparaîtra à nouveau comme display inline ou inline-block comme avant

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

Script:

  $('a').click(function(){
        $('div').toggle();
    });

Avis que la propriété display de la div restera constante même après qu'elle ait été masquée (display:none) et affichée à nouveau.

J'utilise display:block; Ça marche pour moi

Dans le cas d'une feuille de style imprimable, j'utilise ce qui suit:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

Je l'ai utilisé quand j'avais besoin d'imprimer un formulaire contenant des valeurs et les champs de saisie étaient difficiles à imprimer. J'ai donc ajouté les valeurs enveloppées dans un span.balise print_only (div.print_only a été utilisé ailleurs), puis a appliqué la classe. no_print aux champs de saisie. Ainsi, à l'écran, vous verrez les champs de saisie et, lorsqu'ils sont imprimés, seules les valeurs. Si vous voulez obtenir fantaisie vous pouvez utiliser JS pour mettre à jour les valeurs dans les balises span lorsque les champs ont été mis à jour mais ce n'était pas nécessaire dans mon cas. Peut-être pas la solution la plus élégante, mais cela a fonctionné pour moi!

, La meilleure réponse pour display: none est

display:inline

Ou

display:normal

Visibility: hidden masquera l'élément mais l'élément est leur avec DOM. Et en cas d'affichage: none, il supprimera l'élément du DOM.

Vous avez donc l'option pour que l'élément soit masqué ou affiché. Mais une fois que vous le supprimez ( je veux dire display none), Il n'a pas de valeur opposée claire. affichage ont plusieurs valeurs comme display:block,display:inline, display:inline-block et beaucoup d'autres. vous pouvez le vérifier à partir du W3C.

Vous pouvez utiliser ce display:block; et aussi d'ajouter overflow:hidden;

Le Meilleur "opposé" serait de le retourner à la valeur par défaut qui est:

display: inline