La propiedad de apertura de detalles en HTML DOM se usa para establecer o devolver si la información oculta es visible o no para el usuario. Esta propiedad se utiliza para reflejar el atributo abierto de HTML.
Sintaxis:
- Devuelve la propiedad abierta Detalles.
detailsObject.open
- Se utiliza para establecer la propiedad de apertura de detalles.
detailsObject.open = true|false
Valores de propiedad: Acepta dos valores de propiedad que se enumeran a continuación:
- verdadero: especifica que la información oculta debe ser visible.
- false: Especifica que la información oculta no debe ser visible. Es falso por defecto.
Valor devuelto: Devuelve un valor booleano que representa que la información oculta será visible o no.
Ejemplo 1: este ejemplo devuelve la propiedad abierta Detalles.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM details open Property
</title>
<style>
h2 {
color: green;
font-size: 35px;
}
summary {
font-size: 40px;
color: #090;
font-weight: bold;
}
</style>
</head>
<body>
<center>
<h2>DOM Details open Property </h2>
<!-- assigning id to details tag. -->
<details id="GFG">
<summary>GeeksforGeeks</summary>
<p>A computer science portal for geeks</p>
<div>
It is a computer science portal
where you can learn programming.
</div>
</details>
<br>
<button onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
// Accessing details tag.
var x = document.getElementById("GFG");
// Display hidden information
// using open property.
x.open = true;
}
</script>
</center>
</body>
</html>
Salida:
antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: este ejemplo establece la propiedad de apertura de detalles.
html
<!DOCTYPE html>
<html>
<head>
<title>DOM details open Property</title>
<style>
h2 {
color: green;
font-size: 35px;
}
summary {
font-size: 40px;
color: #090;
font-weight: bold;
}
</style>
</head>
<body>
<center>
<h2>DOM Details open Property </h2>
<!-- assigning id to details tag. -->
<details id="GFG">
<summary>GeeksforGeeks</summary>
<p>A computer science portal for geeks</p>
<div>It is a computer science portal
where you can learn programming.</div>
</details>
<br>
<button onclick="myGeeks()">Submit</button>
<p id="sudo" style="font-size:25px;"></p>
<script>
function myGeeks() {
// Accessing details tag.
var x = document.getElementById("GFG");
// Display hidden information
// using open property.
var g = x.open = false;
document.getElementById("sudo").innerHTML = g;
}
</script>
</center>
</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 abierta DOM Details se enumeran a continuación:
- Google Chrome 12.0
- Firefox 49.0
- Ópera 15.0
- Safari 6.0
- Edge 79 y superior
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA