Existe um oposto a exibir: nenhum?

O oposto de visibility: hiddené visibility: visible. Da mesma forma, existe algum oposto para display: none?

Muitas pessoas ficam confusas ao descobrir como mostrar um elemento quando ele tem display: none, pois não é tão claro quanto usar a visibilitypropriedade.

Eu poderia apenas usar em visibility: hiddenvez de display: none, mas não dá o mesmo efeito, por isso não vou com ele.

display: nonenão tem um literal oposto como o visibility:hiddenfaz.

A visibilitypropriedade decide se um elemento é visível ou não. Portanto, possui dois estados (visible e hidden) opostos um ao outro.

A displaypropriedade, no entanto, decide quais regras de layout um elemento seguirá. Existem vários tipos diferentes de regras de como elementos irá estabelecer-se fora em CSS, por isso existem vários valores diferentes ( block, inline, inline-blocketc - veja a documentação para esses valores aqui ).

display:none remove completamente um elemento do layout da página, como se não estivesse lá.

Todos os outros valores para displayfazem com que o elemento faça parte da página; portanto, de certa forma, são todos opostos display:none.

Mas não há um valor que seja o inverso direto display:none- assim como não há um penteado que seja o oposto de "careca".

Um verdadeiro oposto ao que display: nonenão existe (ainda).

Mas display: unseté muito próximo e funciona na maioria dos casos.

Do MDN (Mozilla Developer Network):

A palavra-chave CSS não configurada é a combinação das palavras-chave inicial e herdada. Como essas duas outras palavras-chave em todo o CSS, ele pode ser aplicado a qualquer propriedade CSS, incluindo a abreviação CSS all. Essa palavra-chave redefine a propriedade para seu valor herdado se herdar do pai ou para o valor inicial, se não. Em outras palavras, ele se comporta como a palavra-chave herdada no primeiro caso e como a palavra-chave inicial no segundo caso.

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

Observe também que display: revertestá sendo desenvolvido atualmente. Veja MDN para detalhes.

Ao alterar elemento de displayem Javascript, em muitos casos, uma opção adequada para 'desfazer' o resultado de element.style.display = "none"é element.style.display = "". Isso remove a displaydeclaração do styleatributo, revertendo o valor real da displaypropriedade para o valor definido na folha de estilo do documento (para o padrão do navegador, se não for redefinido em outro lugar). Mas a abordagem mais confiável é ter uma classe em CSS como

.invisible { display: none; }

e adicionando / removendo esse nome de classe para / de element.className.

você pode usar

display: normal;

Funciona normalmente .... É um pequeno hacking em css;)

Eu uso display:block; funciona para mim

Como Paul explica, não há literalmente o oposto da exibição: nenhum em HTML, pois cada elemento tem uma exibição padrão diferente e você também pode alterar a exibição com uma classe ou estilo embutido etc.

No entanto, se você usar algo como jQuery, as funções show e hide se comportam como se houvesse o oposto do display none. Quando você oculta e mostra um elemento novamente, ele será exibido exatamente da mesma maneira que era antes de ser oculto. Eles fazem isso armazenando o valor antigo da propriedade display ao ocultar o elemento, para que, quando você o mostre novamente, ele seja exibido da mesma maneira que antes de ocultá-lo. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Isso significa que, se você definir uma div, por exemplo, para exibir in-line ou bloco in-line e ocultá-la e mostrá-la novamente, será exibida novamente como exibição in-line ou bloco in-line, como era antes

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

roteiro:

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

Observe que a propriedade display da div permanecerá constante mesmo depois de ocultada (display: none) e mostrada novamente.

No caso de uma folha de estilo para impressão, eu uso o seguinte:

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

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

Usei isso quando precisei imprimir um formulário contendo valores e os campos de entrada eram difíceis de imprimir. Então, adicionei os valores envolvidos em uma tag span.print_only (div.print_only foi usado em outro lugar) e, em seguida, apliquei a classe .no_print aos campos de entrada. Então, na tela, você veria os campos de entrada e, quando impressos, apenas os valores. Se você quisesse ter uma ideia, poderia usar o JS para atualizar os valores nas tags span quando os campos foram atualizados, mas isso não foi necessário no meu caso. Talvez não seja a solução mais elegante, mas funcionou para mim!

Você pode usar display: block

Exemplo:

<!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> 

Eu enfrentei esse desafio ao criar um aplicativo em que queria uma tabela oculta para certos usuários, mas não para outros.

Inicialmente, eu o configurei como display: none, mas display: bloco em linha para os usuários que eu queria vê-lo, mas tive os problemas de formatação que você pode esperar (colunas em consolidação ou geralmente bagunçadas).

A maneira como trabalhei foi mostrar primeiro a tabela e depois exibir "none: none" para os usuários que eu não queria ver. Dessa forma, ele foi formatado normalmente, mas depois desapareceu conforme necessário.

Uma solução lateral, mas pode ajudar alguém!

O oposto de 'none' é 'flex' ao trabalhar com o reagir nativo.

visibilidade: oculto ocultará o elemento, mas o elemento é deles com DOM. E no caso de display: none, ele removerá o elemento do DOM.

Então você tem a opção para o elemento ocultar ou exibir. Mas uma vez que você o exclua (quero dizer, exibir nenhum), ele não terá um valor oposto claro. display possui vários valores como display: block, display: inline, display: inline-block e muitos outros. você pode conferir no W3C.

A melhor resposta para display: noneé

display:inline

ou

display:normal

Você pode usar isso display:block;e também adicionaroverflow:hidden;

O melhor "oposto" seria retorná-lo ao valor padrão, que é:

display: inline