Atributo Style display

Definición y uso

display Configura o devuelve el tipo de visualización del elemento.

Los elementos en HTML son principalmente de tipo “inline” o “block”: los elementos inline tienen contenido flotante a izquierda y derecha. Los elementos block llenan toda la línea, y no se puede mostrar ningún contenido a su izquierda o derecha.

display la propiedad también permite que el autor muestre u oculte elementos. Es similar a la propiedad visibility. Pero, si se configura display:none, ocultará todo el elemento y visibility:hidden lo que significa que el contenido del elemento no será visible, pero el elemento mantendrá su posición y tamaño originales.

Consejo:Si el elemento es un elemento de bloque, también se puede cambiar su tipo de visualización a través de la propiedad float.

Véase también:

Tutorial de CSS:CSS Display y visibility

Manual de referencia CSS:Propiedad display

Ejemplo

Ejemplo 1

Establecer que no se muestre el elemento <div>:

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

Pruebe usted mismo

Ejemplo 2

La diferencia entre las propiedades display y visibility:

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

Pruebe usted mismo

Ejemplo 3

Alternar entre ocultar y mostrar elementos:

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

Pruebe usted mismo

Ejemplo 4

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

Pruebe usted mismo

Ejemplo 5

Devolver el tipo de visualización del elemento <p>:

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

Pruebe usted mismo

Sintaxis

Devolver la propiedad display:

object.style.display

Configurar la propiedad display:

object.style.display = value

Valor de la propiedad

Valor Descripción
block El elemento se renderiza como un elemento de nivel bloque.
compact El elemento se presenta como un elemento de bloque o en línea. Depende del contexto.
flex El elemento se presenta como un cuadro flexible de nivel bloque. Nueva característica de CSS3.
inline El elemento se presenta como un elemento en línea. Predeterminado.
inline-block El elemento se presenta como un cuadro en línea de nivel bloque.
inline-flex El elemento se presenta como un cuadro en línea de nivel flexible. Nueva característica de CSS3.
inline-table El elemento se presenta como una tabla en línea (como <table>), sin saltos de línea antes y después de la tabla.
list-item El elemento se presenta como una lista.
marker

Este valor establece el contenido antes o después de la marca (marker).

Se utiliza junto con los pseudo-elementos :before y :after. De lo contrario, este valor es igual a "inline".
none El elemento no se muestra.
run-in El elemento se presenta como un elemento de bloque o en línea. Depende del contexto.
table El elemento se presenta como una tabla de bloque (block table) (como <table>), con saltos de línea antes y después de la tabla.
table-caption El elemento se presenta como un encabezado de tabla (como <caption>).
table-cell El elemento se presenta como una celda de tabla (como <td> y <th>).
table-column El elemento se presenta como una columna de celdas (como <col>).
table-column-group El elemento se presenta como un grupo de una o más columnas (como <colgroup>).
table-footer-group El elemento se presenta como una fila de pie de tabla (como <tfoot>).
table-header-group El elemento se presenta como una fila de encabezado de tabla (como <thead>).
table-row El elemento se presenta como una fila de tabla (como <tr>).
table-row-group El elemento se presenta como un grupo de una o más filas (como <tbody>).
initial Establece esta propiedad en su valor predeterminado. Consulte initial.
inherit Hereda esta propiedad del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: inline
Valor de retorno: Cadena, que representa el tipo de visualización del elemento.
Versión de CSS: CSS1

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte