Mostrar y ocultar elementos con JavaScript

Dejar un comentario / HTML, javascript / Por

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.

Dejar un comentario

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