Style display Property

Exemplo

Defina um <div> elemento a não ser exibida:

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

Definição e Uso

Os conjuntos de propriedades de exibição ou retorna tipo de exibição do elemento.

Elementos em HTML são na sua maioria "inline" ou "block" elementos: um elemento inline tem conteúdo em seu lado esquerdo e direito flutuante. Um elemento de bloco enche toda a linha, e nada pode ser exibido em seu lado esquerdo ou direito.

A propriedade display também permite que o autor para mostrar ou ocultar um elemento. É semelhante à visibilidade propriedade. No entanto, se você definir display: none, ele esconde o elemento inteira, enquanto visibility: hidden significa que o conteúdo do elemento será invisível, mas o elemento permanece na sua posição e tamanho original.

Tip: Se um elemento é um elemento de bloco, o seu tipo de exibição também pode ser alterado com a propriedade float.

Suporte navegador

A propriedade de exibição é compatível com todos os principais navegadores.

Sintaxe

Devolver a propriedade display:

object .style.display

Defina a propriedade display:

object .style.display= Valores de propriedade

Valor	Descrição
block	Elemento é processado como um elemento de nível de bloco
compact	Elemento é processado como um nível de bloco ou elemento inline. Depende do contexto
flex	Elemento é apresentado como uma caixa de flex-nível de bloco. Novo em CSS3
inherit	O valor da propriedade de exibição é herdada de elemento pai
inline	Elemento é processado como um elemento inline. Este é o padrão
inline-block	Elemento é processado como um bloco caixa dentro de uma caixa em linha
inline-flex	Elemento é apresentado como uma caixa de flex-inline. Novo em CSS3
inline-table	Elemento é processado como uma tabela inline (como <table>), sem quebra de linha antes ou depois da tabela
list-item	Elemento é renderizado como uma lista
marker	Este valor define conteúdo antes ou depois de uma caixa a ser um marcador (utilizado com: antes de e:. Depois de pseudo-elementos Caso contrário, este valor é idêntico ao "in-line")
none	Elemento não será exibido
run-in	Elemento é processado como em nível de bloco ou elemento inline. Depende do contexto
table	Elemento é processado como uma tabela do bloco (como <table>), com uma quebra de linha antes e depois da tabela
table-caption	Elemento é processado como uma legenda da tabela (como <caption>)
table-cell	Elemento é processado como uma célula da tabela (como <td> e <th>)
table-column	Elemento é apresentado como uma coluna de células (like <col>)
table-column-group	Elemento é processado como um grupo de uma ou mais colunas (like <colgroup>)
table-footer-group	Elemento é processado como uma linha da tabela de rodapé (like <tfoot>)
table-header-group	Elemento é processado como uma linha de cabeçalho da tabela (like <thead>)
table-row	Elemento é processado como uma linha da tabela (como <tr>)
table-row-group	Elemento é processado como um grupo de uma ou mais linhas (like <tbody>)
initial	Define essa propriedade para seu valor padrão. Leia sobre inicial
inherit	Herda esta propriedade a partir de seu elemento pai. Leia sobre herdar

Detalhes técnicos

Valor padrão:	na linha
Valor de retorno:	Uma corda, que representa o tipo de um elemento de afixação
CSS Versão	CSS1

mais Exemplos

Exemplo

Diferença entre a propriedade de exibição e a propriedade de visibilidade:

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

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

Tente você mesmo "

Exemplo

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;
}

Tente você mesmo "