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

Question

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

Beaucoup de gens sont confus pour savoir comment afficher un élément lorsqu'il a display: none, car ce n'est pas aussi clair que d'utiliser la propriété visibility.

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

Answer 1

display: none n'a pas d'opposé littéral comme visibility:hidden le fait.

La propriété visibility décide si un élément est visible ou non. Elle a donc deux états (visible et hidden), qui sont opposés l'un à l'autre.

Cependant, la propriété display décide des règles de mise en page qu'un élément suivra. Il existe plusieurs types de règles pour la manière dont les éléments se mettront en page en CSS, donc il existe plusieurs valeurs différentes (block, inline, inline-block etc — voir la documentation pour ces valeurs ici ).

display:none supprime complètement un élément de la mise en page de la page, comme s'il n'existait pas.

Toutes les autres valeurs de display font en sorte que l'élément fasse partie de la page, donc d'une certaine manière ils sont tous opposés à display:none.

Mais il n'y a pas une seule valeur qui soit le contraire direct de display:none - tout comme il n'y a pas une seule coiffure qui soit l'opposé de "chauve".

Answer 2

Un véritable opposé à display: none n'existe pas encore.

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

De MDN (Mozilla Developer Network):

Le mot-clé unset en CSS est la combinaison des mots-clés initial et inherit. Comme ces deux autres mots-clés CSS globaux, 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 si ce n'est pas le cas. 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)

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

Answer 3

Lorsque vous modifiez l'élément display en Javascript, dans de nombreux cas, une option 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, ramenant la valeur réelle de la propriété display à la valeur définie dans la feuille de style du document (ou à 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 à partir de element.className.

Answer 4

Vous pouvez utiliser

affichage: normal;

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

Answer 5

Comme Paul l'explique, il n'y a pas d'opposé littéral de 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 inline, etc.

Cependant, si vous utilisez quelque chose comme jQuery, leurs fonctions show et hide se comportent comme s'il existait un opposé de display none. Lorsque vous masquez, puis affichez à nouveau un élément, il s'affiche exactement de la même manière qu'avant d'être masqué. Ils le font en stockant la valeur ancienne de la propriété display 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 que vous ne le masquiez. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Cela signifie que si vous définissez par exemple un div pour s'afficher en ligne ou en inline-block, et que vous le masquez puis le montrez à nouveau, il réapparaîtra une fois de plus en tant qu'affichage en ligne ou en inline-block comme avant.

hello
hello2
hello3

script:

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

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