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)
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
display
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', '');
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.
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.
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;