La propiedad de visualización de estilo en HTML DOM se utiliza para establecer o devolver el tipo de visualización de un elemento. Es similar a la propiedad de visibilidad, que muestra u oculta el elemento. Con una ligera diferencia de visualización: ninguno, que oculta todo el elemento, mientras que visibilidad: oculto significa que solo el contenido del elemento será invisible, pero el elemento permanecerá en su posición y tamaño originales.
Sintaxis:
- Devuelve la propiedad de visualización.
object.style.display
- Establece la propiedad de visualización.
object.style.display = value;
Valores de propiedad:
- en línea: Es el valor por defecto. Representa el elemento como un elemento en línea.
- bloque: Representa el elemento como un elemento a nivel de bloque.
- compacto: representa el elemento a nivel de bloque o en línea, según el contexto.
- flex: Representa el elemento como un cuadro flexible a nivel de bloque.
- bloque en línea: representa el elemento como un cuadro de bloque dentro de un cuadro en línea.
- inline-flex: representa el elemento como un cuadro flexible de nivel en línea.
- inline-table: representa el elemento como una tabla en línea.
- list-item: Representa el elemento como una lista.
- marcador: Establece el contenido antes o después del cuadro como un marcador.
- none: No mostrará ningún elemento.
- run-in: representa el elemento a nivel de bloque o en línea, según el contexto.
- table: representa el elemento como una tabla de bloques, con un salto de línea antes y después de la tabla.
- table-caption: representa el elemento como un título de tabla.
- table-cell: Representa el elemento como una celda de tabla.
- table-column: Representa el elemento como una columna de celdas.
- table-column-group: Representa el elemento como un grupo de una o más columnas.
- table-footer-group: representa el elemento como una fila de pie de tabla.
- table-header-group: representa el elemento como una fila de encabezado de tabla.
- table-row: representa el elemento como una fila de la tabla.
- table-row-group: El elemento se representa como un grupo de una o más filas.
- initial: establece la propiedad de visualización en su valor predeterminado.
- heredar: hereda los valores de propiedad de visualización de su elemento principal.
Valor devuelto: Devuelve una string, que representa el tipo de visualización del elemento.
Ejemplo 1: este ejemplo describe el valor de la propiedad en línea.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style display Property
</title>
</head>
<body>
<h2>
HTML DOM Display Property
</h2>
<p>
Click on the button to set
display property
</p>
<div id = "GFG">
Geeks for Geeks
</div>
<button onclick="myGeeks()">
Press
</button>
<!-- script to set display property -->
<script>
function myGeeks() {
document.getElementById("GFG").style.display
= "inline";
}
</script>
</body>
</html>
Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: Este ejemplo describe el valor de la propiedad none.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style display Property
</title>
</head>
<body>
<h2>
HTML DOM Display Property
</h2>
<p>
Click on the button to set
display property
</p>
<div id = "GFG">
Geeks for Geeks
</div>
<button onclick="myGeeks()">
Press
</button>
<!-- script to set display property -->
<script>
function myGeeks() {
document.getElementById("GFG").style.display
= "none";
}
</script>
</body>
</html>
Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 3: este ejemplo describe el valor de la propiedad table-caption.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style display Property
</title>
</head>
<body>
<h2>
HTML DOM Display Property
</h2>
<p>
Click on the button to set
display property
</p>
<div id = "GFG">
Geeks for Geeks
</div>
<button onclick="myGeeks()">
Press
</button>
<!-- script to set display property -->
<script>
function myGeeks() {
document.getElementById("GFG").style.display
= "table-caption";
}
</script>
</body>
</html>
Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 4: este ejemplo describe el valor de la propiedad del bloque.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style display Property
</title>
</head>
<body>
<h2>
HTML DOM Display Property
</h2>
<p>
Click on the button to set
display property
</p>
<div id = "GFG">
Geeks for Geeks
</div>
<button onclick="myGeeks()">
Press
</button>
<!-- script to set display property -->
<script>
function myGeeks() {
document.getElementById("GFG").style.display
= "block";
}
</script>
</body>
</html>
Salida: Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad de visualización de estilo DOM se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 4 y superior
- Firefox 1 y superior
- Ópera 7 y superior
- Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA