Y a-t-il un opposé à l'affichage: aucun?

Le contraire de visibility: hiddenest visibility: visible. De même, y a-t-il un contraire pour display: none?

Beaucoup de gens ne savent pas comment montrer un élément quand c'est le cas display: none, car ce n'est pas aussi clair que d'utiliser la visibilitypropriété.

Je pourrais simplement utiliser à la visibility: hiddenplace de display: none, mais cela ne donne pas le même effet, donc je ne vais pas avec.

display: nonen'a pas de contraire littéral comme le visibility:hiddenfait.

La visibilitypropriété décide si un élément est visible ou non. Il a donc deux états ( visibleet hidden), opposés l'un à l'autre.

La displaypropriété, cependant, décide des règles de mise en page qu'un élément suivra. Il existe plusieurs types de règles différentes sur la façon dont les éléments vont se mettre en CSS, donc il y a plusieurs valeurs différentes ( block, inline, inline-blocketc. - voir la documentation de ces valeurs ici ).

display:none supprime entièrement un élément de la mise en page, comme s'il n'y était pas.

Toutes les autres valeurs de displayfont que l'élément fasse partie de la page, donc dans un sens, elles sont toutes opposées display:none.

Mais il n'y a pas une seule valeur qui soit l'inverse directe display:none- tout comme il n'y a pas un seul style de cheveux qui soit à l'opposé de «chauve».

Un vrai contraire à display: nonelà n'existe pas (encore).

Mais display: unsetest très proche et fonctionne dans la plupart des cas.

Depuis MDN (Mozilla Developer Network):

Le mot-clé CSS non défini est la combinaison des mots-clés initial et hérité. Comme ces deux autres mots clés à l'échelle 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 son parent ou à sa valeur initiale dans le cas contraire. 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 qu'il display: revertest en cours de développement. Voir MDN pour plus de détails.

Lors du changement d'élément displayen Javascript, dans de nombreux cas, une option appropriée pour «annuler» le résultat element.style.display = "none"est element.style.display = "". Cela supprime la displaydéclaration de l' styleattribut, rétablissant la valeur réelle de la displaypropriété à 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 à / de element.className.

vous pouvez utiliser

display: normal;

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

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

Comme Paul l'explique, il n'y a pas d'opposé littéral à l'affichage: aucun 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 d'affichage et de masquage se comportent comme s'il y avait un opposé à display none. Lorsque vous masquez, puis affichez à nouveau un élément, il s'affiche exactement de la même manière qu'il le faisait avant d'être masqué. Pour ce faire, ils stockent l'ancienne valeur de la propriété d'affichage lors du masquage de l'élément afin que, lorsque vous l'affichez à nouveau, il s'affiche de la même manière qu'avant de le masquer. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Cela signifie que si vous définissez un div par exemple pour afficher un bloc en ligne ou un bloc en ligne et que vous le masquez puis l'affichez à nouveau, il s'affichera à nouveau comme affichage en ligne ou bloc en ligne comme avant

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

scénario:

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

Notez que la propriété d'affichage du div restera constante même après avoir été masquée (affichage: aucun) et affichée à nouveau.

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é lorsque je devais imprimer un formulaire contenant des valeurs et que les champs de saisie étaient difficiles à imprimer. J'ai donc ajouté les valeurs enveloppées dans une balise span.print_only (div.print_only a été utilisé ailleurs), puis j'ai appliqué la classe .no_print aux champs d'entrée. Ainsi, à l'écran, vous verrez les champs de saisie et, une fois imprimés, uniquement les valeurs. Si vous vouliez avoir de la fantaisie, vous pouvez utiliser JS pour mettre à jour les valeurs des 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!

Vous pouvez utiliser display: block

Exemple :

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

J'ai rencontré ce défi lors de la création d'une application où je voulais une table cachée pour certains utilisateurs mais pas pour d'autres.

Au départ, je l'ai configuré comme display: none mais ensuite display: inline-block pour les utilisateurs que je voulais voir mais j'ai rencontré les problèmes de formatage auxquels vous pourriez vous attendre (consolidation des colonnes ou généralement désordonnées).

La façon dont je l'ai contourné était de montrer d'abord le tableau, puis de faire "display: none" pour les utilisateurs que je ne voulais pas voir. De cette façon, il s'est formaté normalement mais a ensuite disparu au besoin.

Un peu une solution latérale mais pourrait aider quelqu'un!

l'opposé de «none» est «flex» lorsque vous travaillez avec react native.

visibilité: hidden masquera l'élément mais l'élément est leur avec DOM. Et en cas d'affichage: aucun cela supprimera l'élément du DOM.

Vous avez donc la possibilité de masquer ou d'afficher l'élément. Mais une fois que vous le supprimez (je veux dire n'en afficher aucun), il n'a pas de valeur opposée claire. display ont plusieurs valeurs comme display: block, display: inline, display: inline-block et bien d'autres. vous pouvez le vérifier à partir du W3C.

La meilleure réponse display: noneest

display:inline

ou

display:normal

Vous pouvez l'utiliser display:block;et ajouteroverflow:hidden;

Le meilleur "contraire" serait de le renvoyer à la valeur par défaut qui est:

display: inline