Style display Property

Ejemplo

Establecer un <div> elemento que no se mostrará:

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

Definición y Uso

Los conjuntos de propiedades de visualización o devuelve el tipo de visualización del elemento.

Los elementos en HTML son en su mayoría "inline" o "block" elementos: Un elemento en línea ha flotante contenido en su lado izquierdo y derecho. Un elemento de bloque llena toda la línea, y nada se puede mostrar en su lado izquierdo o derecho.

La propiedad pantalla también permite al autor para mostrar u ocultar un elemento. Es similar a la visibilidad de la propiedad. Sin embargo, si se establece display: none, se esconde el elemento completo, mientras que la visibilidad: oculto significa que el contenido del elemento serán invisibles, pero el elemento se mantiene en su posición y tamaño original.

Tip: Si un elemento es un elemento de bloque, su tipo de pantalla también se puede cambiar con la propiedad float.

Soporte del navegador

La propiedad de presentación es compatible con todos los principales navegadores.

Sintaxis

Devolver la propiedad de presentación:

object .style.display

Establecer la propiedad de presentación:

object .style.display= Valores de propiedad

Valor	Descripción
block	Elemento se representa como un elemento a nivel de bloque
compact	Elemento se representa como un nivel de bloque o elemento en línea. Depende del contexto
flex	Elemento se representa como una caja de flexión a nivel de bloque. Nuevo en CSS3
inherit	El valor de la propiedad display se hereda de elemento padre
inline	Elemento se representa como un elemento en línea. Esto es por defecto
inline-block	Elemento se representa como una caja de bloque dentro de una caja de línea
inline-flex	Elemento se representa como una caja de flexión a nivel de línea. Nuevo en CSS3
inline-table	Elemento se representa como una tabla en línea (como <table>), sin salto de línea antes o después de la tabla
list-item	Elemento se representa como una lista
marker	Este valor establece contenido antes o después de una caja para ser un marcador (utilizar con: antes y:. Después de pseudo-elementos lo contrario, este valor es idéntico a "en línea")
none	El elemento no se mostrará
run-in	Elemento se representa como a nivel de bloque o elemento en línea. Depende del contexto
table	Elemento se representa como una tabla de bloques (como <table>), con un salto de línea antes y después de la tabla
table-caption	Elemento se representa como una leyenda de la tabla (como <caption>)
table-cell	Elemento se representa como una celda de la tabla (como <td> y <th>)
table-column	Elemento se representa como una columna de celdas (like <col>)
table-column-group	Elemento se representa como un grupo de una o más columnas (like <colgroup>)
table-footer-group	Elemento se representa como una fila de la tabla de pie de página (like <tfoot>)
table-header-group	Elemento se representa como una fila de encabezado de tabla (like <thead>)
table-row	Elemento se representa como una fila de la tabla (como <tr>)
table-row-group	Elemento se representa como un grupo de una o más filas (like <tbody>)
initial	Establece esta propiedad a su valor por defecto. Lea acerca inicial
inherit	Hereda esta propiedad de su elemento padre. Lea acerca de heredar

Detalles técnicos

Valor por defecto:	en línea
Valor de retorno:	Una cadena, que representa el tipo de visualización de un elemento
Versión CSS	CSS1

Más ejemplos

Ejemplo

Diferencia entre la propiedad de presentación y la propiedad de visibilidad:

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

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

Inténtalo tú mismo "

Ejemplo

Diferencia entre "inline" , "block" y "none" :

function myFunction(x) {
    var whichSelected = x.selectedIndex;
    var sel = x.options[whichSelected].text;
    var elem = document.getElementById("mySpan");
    elem.style.display = sel;
}

Inténtalo tú mismo "