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:

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í:

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:

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

Si quieres puedes probar el ejemplo en línea.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Relacionado:  Enviar JSON de Angular a Node: ejemplo

Únete a otros 608 suscriptores


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/

0 Comments

Deja un comentario

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

A %d blogueros les gusta esto: