Método para mostrar u ocultar elementos en HTML usando propiedad de presentación en JavaScript

Aquí, vamos a aprender sobre la método para mostrar u ocultar elementos en HTML usando propiedad de presentación en JavaScript .

En HTML, podemos usar la propiedad de presentación para mostrar de forma selectiva y elementos de ocultar. En este tutorial, vamos a ver cómo …

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: burlywood;
}
</style>
<body>
<div class="container center">
<h4>Here's a new year party you'll never forget!</h2>
<div class="row">
<div class="col">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Tuesday, 31st December 2019</span>
<p>New Year's Eve Plans!</p>
<span>Short party hosted at my place, be sure to come and don't forget to wear your dancing shoes! :)</span>
</div>
<div class="schedule white-text">
<h5>Schedule is as follows</h5>
<p>5pm Snacks</p>
<p>6pm Resolution making</p>
<p>7pm Musical chairs, dog in the bone and other fun games!</p>
<p>9pm Dinner</p>
<p>10 pm Karoke</p>
<p>11pm 2019: an overview and let the countdown begin!</p>
</div>
<div class="card-action">
<button class="btn">RSVP</button>
<button class="btn hide-btn">Hide Schedule</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>

salida

Method to show or hide elements in HTML using display property in JavaScript - 4

Ahora que tenemos una plantilla de configuración intento Vamos a ocultar el horario en el clic en el botón. Podemos conectar un detector de eventos y establecer la propiedad de presentación de ninguno . En primer lugar, necesitamos una referencia tanto a nuestro calendario, así como nuestro botón.

const schedule = document.querySelector('.schedule');
const hideBtn = document.querySelector('.hide-btn');

Ahora vamos a añadir un detector de eventos para configurar la pantalla de nuestro programa, ya que ninguno.

<script>
const schedule=document.querySelector('.schedule');
const hideBtn=document.querySelector('.hide-btn');
hideBtn.addEventListener('click',()=>{
schedule.style.display="none";
})
</script>

salida

Method to show or hide elements in HTML using display property in JavaScript - 5

Se puede ver que en clic en el botón Ocultar calendario somos capaces de ocultar con éxito el horario! Gran & nbsp;. Se puede ver que al hacer clic en el botón de programación ocultar que son capaces de ocultar con éxito el horario! Excelente.

intento Vamos a hacer esto a la inversa. Después de haber hecho clic en el botón de programación ocultar vamos a cambiar el texto de programa de espectáculos y luego, si el usuario hace clic en él vamos a conseguir el horario de vuelta.

<script>
const schedule=document.querySelector('.schedule');
const hideBtn=document.querySelector('.hide-btn');
hideBtn.addEventListener('click',()=>{
schedule.style.display="none";
hideBtn.textContent="Show Schedule";
})
</script>

salida

Method to show or hide elements in HTML using display property in JavaScript - 6

Se puede ver ahora el texto del botón ha cambiado! Pero ¿cómo conseguir la parte posterior horario? Podemos establecer la propiedad de bloquear la pantalla, pero ¿cómo saber cuándo hay que hacer eso? Una forma sencilla sería la de comprobar si el botón dice ocultar o mostrar.

<script>
var showSchedule=new Boolean();
const schedule=document.querySelector('.schedule');
const hideBtn=document.querySelector('.hide-btn');
hideBtn.addEventListener('click',()=>{
if(hideBtn.textContent=="Hide Schedule")
showSchedule=false;
else
showSchedule=true;
if(showSchedule){
schedule.style.display="block";
hideBtn.textContent="Hide Schedule";
}
else{
schedule.style.display="none";
hideBtn.textContent="Show Schedule";
}
})
</script>

salida

Method to show or hide elements in HTML using display property in JavaScript - 7

Ahora al hacer clic en horario de la demostración, el botón cambia su texto y se puede ver el calendario de vuelta otra vez!

De esta manera, podemos utilizar simplemente la propiedad de presentación en HTML a elementos Mostrar u ocultar las basadas selectivamente en ciertos eventos.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *