Propriedade de exibição Style

Definição e uso

display

Os elementos no HTML são principalmente

display permite ao autor mostrar ou ocultar elementos. É semelhante à propriedade visibility. No entanto, se definido display:none, ocultará todo o elemento, enquanto visibility:hidden Isso significa que o conteúdo do elemento não será visível, mas o elemento continuará a manter sua posição e tamanho originais.

Dica:Se o elemento for um bloco, também pode alterar seu tipo de exibição através da propriedade float.

Veja também:

Tutorial CSS:CSS Display e visibility

Manual de referência CSS:Propriedade display

Exemplo

Exemplo 1

Definir o elemento <div> como não visível:

document.getElementById("myDIV").style.display = "none";

Experimente você mesmo

Exemplo 2

A diferença entre as propriedades display e visibility:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

Experimente você mesmo

Exemplo 3

Alternar entre ocultar e mostrar elementos:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

Experimente você mesmo

Exemplo 4

A diferença entre "inline", "block" e "none":
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

Experimente você mesmo

Exemplo 5

Retorna o tipo de exibição do elemento <p>:

alert(document.getElementById("myP").style.display);

Experimente você mesmo

Sintaxe

Retornar a propriedade display:

object.style.display

Definir a propriedade display:

object.style.display = value

Valor da propriedade

Valor Descrição
block O elemento é renderizado como um elemento de bloco.
compact O elemento é apresentado como um elemento de bloco ou inline. Dependendo do contexto.
flex O elemento é apresentado como um box flexível de bloco. Novidade do CSS3.
inline O elemento é apresentado como um elemento inline. Padrão.
inline-block O elemento é apresentado como um box block dentro de um box inline.
inline-flex O elemento é apresentado como um box inline de nível flexível. Novidade do CSS3.
inline-table O elemento é apresentado como uma tabela inline (como <table>), sem quebras de linha antes e depois da tabela.
list-item O elemento é apresentado como uma lista.
marker

Esse valor define o conteúdo antes ou depois da caixa como um marcador (marker)

Usado junto com os pseudo-elementos :before e :after. De outra forma, esse valor é o mesmo que "inline".
none O elemento não é exibido.
run-in O elemento é apresentado como um elemento de bloco ou inline. Dependendo do contexto.
table O elemento é apresentado como uma tabela de bloco (block table) (como <table>), com quebras de linha antes e depois da tabela.
table-caption O elemento é apresentado como um cabeçalho de tabela (como <caption>).
table-cell O elemento é apresentado como uma célula de tabela (como <td> e <th>).
table-column O elemento é apresentado como uma coluna de célula (como <col>).
table-column-group O elemento é apresentado como um grupo de uma coluna ou várias colunas (como <colgroup>).
table-footer-group O elemento é apresentado como uma linha de rodapé de tabela (como <tfoot>).
table-header-group O elemento é apresentado como uma linha de cabeçalho de tabela (como <thead>).
table-row O elemento é apresentado como uma linha de tabela (como <tr>).
table-row-group O elemento é apresentado como um grupo de uma linha ou várias linhas (como <tbody>).
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: inline
Retorno: Cadeia de caracteres, que representa o tipo de exibição do elemento.
Versão do CSS: CSS1

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte