javascript

Mostrar y ocultar elementos con JavaScript

En este post te mostraré cómo usar JavaScript para mostrar u ocultar un elemento del DOM. Por ejemplo, ocultar un párrafo, div, botón etcétera; y también mostrarlo.

Vamos a usar puro JavaScript, nada de frameworks. Al final dejaré un ejemplo.

Ocultar elemento

Una vez que tenemos una referencia al elemento del DOM (se puede con getElementById o los querySelector) podemos modificar su estilo con JavaScript y colocarle display en none. Por ejemplo:

const $parrafo = document.querySelector("#parrafo");
$parrafo.style.display = "none";

De este modo será ocultado el elemento que tiene el id parrafo.

Mostrar elemento

Si quieres volver a mostrar el elemento del DOM usando JavaScript, cambia de nuevo su estilo pero ahora colócale un valor (en style.display) distinto a none.

Normalmente el valor debería ser block, pero si tú le has colocado un valor distinto, simplemente usa el mismo al cambiarlo con JavaScript.

Quedaría así:

const $parrafo = document.querySelector("#parrafo");
$parrafo.style.display = "block";

Sobre los botones

En algunos elementos, el display es distinto. Por ejemplo, para los botones es inline. Así que si quieres mostrar un botón sería:

$boton.style.display = "inline";

Y en ocasiones el estilo es simplemente una cadena vacía, así:

$boton.style.display = "";

Ejemplo

Voy a mostrar y ocultar un párrafo (pero recuerda que podría ser un div, button, etcétera) cuando se presionen determinado botón. Comenzamos diseñando el HTML:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Mostrar y ocultar elementos en JavaScript</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <h1>Mostrar y ocultar elementos en JavaScript</h1>
 <a href="//parzibyte.me/blog">By parzibyte</a>
 <br><br>
  <button id="btnOcultar">Ocultar</button>
  <button id="btnMostrar">Mostrar</button>
  <p id="parrafo">Hola, yo soy un simple párrafo.</p>

    <script src="script.js"></script>
  </body>
</html>

Después en el script obtenemos una referencia a los elementos y mostramos u ocultamos dependiendo del botón presionado:

const $btnOcultar = document.querySelector("#btnOcultar"),
 $btnMostrar = document.querySelector("#btnMostrar"),
 $parrafo = document.querySelector("#parrafo");

$btnMostrar.addEventListener("click", () => {
 $parrafo.style.display = "block";
});


$btnOcultar.addEventListener("click", () => {
 $parrafo.style.display = "none";
});

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/