6

Antes fiz algumas pesquisas sobre as propriedades do "display".

Pretendo ocultar algumas div e usei display:none. Pra voltar a exibir as div que propriedade do display deveria usar ?

(Estou trabalhar com Javascript)

4 Respostas 4

7

Na realidade o display por default (caso não declares nada em contrário) depende do elemento, no caso de ser div o display default é block, já por exemplo em uma imagem ou span (<img>, <span>) o display default é inline

3
  • Fora esses, também temos o inline-block e flex :) Commented 26/01/2017 às 12:01
  • 1
    @MuriloGambôa , é verdade e até há mais (developer.mozilla.org/en-US/docs/Web/CSS/display), mas acho (mesmo quase a certeza) que não existem elementos que por default tenham esse display
    – Miguel
    Commented 26/01/2017 às 12:02
  • realmente, nenhum elemento tem por padrão esses displays Commented 26/01/2017 às 12:03
4

O oposto do display:none sera display:block

Visto que esta a utilizar Javascript, considere tambem jQuery, podera atingir o mesmo resultado de uma maneira mais facil e intuitiva como por exemplo:

jQuery(elemento).hide(); /*para esconder [utiliza display:none]*/

jQuery(elemento).show(); /*para mostrar [utiliza display:block]*/

Caso nao seja permitido o jQuery, considere utilizar CSS juntamente com Javascript da seguinte forma:

No ficheiro CSS

.hide{
   display:none;
}
.show{
   display:block;
}

No Javascript

var elemento = document.getElementById(ID_DO_ELEMENTO);
//esconder
elemento.className="hide";
//mostrar
elemento.className=elemento.className.replace('hide', 'show');
//ou simplesmente removento do 'hide'
elemento.className=elemento.className.replace('hide', '');
2
  • 3
    Depende, o elemento span ou um li tem como padrão o display: inline e não um display: block, isso também pode ser alterado no CSS, veja aqui sobre isso.
    – Inkeliz
    Commented 26/01/2017 às 9:41
  • Bem visto @Inkeliz. Contudo o autor da pergunta especifica que o elemento em questao e div. Logo excusado estar a explicar tudo sobre CSS Commented 26/01/2017 às 9:45
4

Segundo essa resposta no SO-EN display: none não tem um oposto como visibility:hidden(oposto visibility: visible).

A propriedade display, no entanto, decide quais as regras de Layout que um elemento seguirá. Existem vários tipos diferentes de regras de como elementos irá ser exibidos no CSS, por isso existem vários valores diferentes(block, inline, inline-block, etc - Documentação).

Display:none Remove um elemento do layout da página inteiramente, como se ele não estivesse lá.

Todos os outros valores para display causa no elemento a ser uma parte da página, neste sentido todos são opostos para display:none,mas não há um valor que é o inverso direto de display:none.

3

Depende de qual o valor inicial. Segundo a MDN o valor inicial, se nada tiver sido aplicado ao elemento é inline. Porém isso não se aplica para todos os elementos. Há um artigo interessante sobre elementos que criam um bloco no layout e outros que são inline, se inserem na linha em questão sem quebrar o layout ou criar um espaço próprio.

<div>, <article>, <p>, <h...> são alguns dos elementos que geram o seu próprio bloco de layout. Podes ver a lista completa aqui. Esses elementos têm o valor inicial de block.

<a>, <span>, <img> são alguns dos elementos que não geram o seu próprio bloco de layout. Podes ver a lista completa aqui. Esses elementos têm o valor inicial de inline.

Podes também ler o valor (caso ele tenha sido defenido por CSS ou direto no style do elemento), assim podes guardar esse valor e repor depois:

var inicial = window.getComputedStyle(el).style;
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .