La propiedad de visualización de estilo se usa para ocultar y mostrar el contenido de HTML DOM accediendo al elemento DOM usando JavaScript/jQuery.
Para ocultar un elemento, establezca la propiedad de visualización de estilo en «ninguno».
document.getElementById("element").style.display = "none";
Para mostrar un elemento, establezca la propiedad de visualización de estilo en «bloquear».
document.getElementById("element").style.display = "block";
- Pasos para mostrar el funcionamiento de la propiedad de visualización de estilo:
- Cree algunos div y asígneles una identificación o clase y luego agréguele un estilo.
<div class="circle"id="circle"></div><div class="rounded"id="rounded"></div><div class="square"id="square"></div> - El ancho y la altura establecerán el ancho y la altura del contenido, border-radius 0% hará un borde cuadrado, 50% hará un círculo y 25% hará una forma redondeada y float hará que los divs se posicionen, margen derecho los hará separados con un espacio a la derecha.
<style type="text/css">.circle {width: 130px;height: 130px;border-radius: 50%;float: left;margin-right: 50px;}.rounded {width: 130px;height: 130px;border-radius: 25%;float: left;margin-right: 50px;}.square {width: 130px;height: 130px;border-radius: 0%;float: left;margin-right: 50px;} - Background-color establecerá el color de fondo del div.
#circle {background-color:#196F3D;}#rounded {background-color:#5DADE2;}#square {background-color:#58D68D;} - El document.getElementById seleccionará el div con la identificación dada.
<script type="text/javascript">document.getElementById("circle").onclick =function() - El style.display = «none» lo hará desaparecer cuando se haga clic en div.
.style.display ="none";
Implementación de la propiedad style.display:
<html>
<head>
<title>Javascript</title>
<style type="text/css">
.circle {
width: 130px;
height: 130px;
border-radius: 50%;
float: left;
margin-right: 50px;
}
.rounded {
width: 130px;
height: 130px;
border-radius: 25%;
float: left;
margin-right: 50px;
}
.square {
width: 130px;
height: 130px;
border-radius: 0%;
float: left;
margin-right: 50px;
}
#circle {
background-color: #196F3D;
}
#rounded {
background-color: #5DADE2;
}
#square {
background-color: #58D68D;
}
</style>
</head>
<body>
<div class="circle" id="circle"></div>
<div class="rounded" id="rounded"></div>
<div class="square" id="square"></div>
<script type="text/javascript">
document.getElementById("circle").onclick = function() {
document.getElementById("circle").style.display = "none";
}
document.getElementById("rounded").onclick = function() {
document.getElementById("rounded").style.display = "none";
}
document.getElementById("square").onclick = function() {
document.getElementById("square").style.display = "none";
}
</script>
</body>
</html>
Salida:
La salida del código anterior es:
La forma cuadrada desaparecerá después de hacer clic en ella:
Del mismo modo, la forma redondeada desaparecerá después de hacer clic en ella:
Del mismo modo, la forma del círculo desaparecerá después de hacer clic en ella.
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por RahulUniyal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA