Ocultar o mostrar elementos html con js - Javascript

A menudo, los desarrolladores web necesitan ocultar o mostrar ciertos elementos html en función de ciertas condiciones. Esto no es difícil de lograr con Javascript. En este artículo, veremos cómo usar Javascript para ocultar o mostrar elementos html y algunos ejemplos prácticos.

Ocultando elementos HTML con Javascript

Para ocultar un elemento html con Javascript, podemos establecer el estilo de visualización del elemento en 'ninguno'. Podemos hacer esto usando la propiedad style.display del elemento.

document.getElementById('miElemento').style.display = 'none';

En este ejemplo, ocultamos el elemento html con la identificación 'miElemento' configurando el valor de visualización en 'none'.

Mostrando elementos HTML con Javascript

Para mostrar un elemento html que se ha ocultado con Javascript, podemos establecer el estilo de visualización del elemento en 'bloque', 'inline-block' o cualquier otro valor de estilo adecuado.

document.getElementById('miElemento').style.display = 'block';

En este ejemplo, mostramos el elemento html con la identificación 'miElemento' configurando el valor de visualización en 'bloque'.

Alternar entre ocultar y mostrar elementos HTML

Podemos usar la propiedad style.display para alternar entre ocultar y mostrar elementos html.

var elemento = document.getElementById('miElemento');
if (elemento.style.display === 'none') {
  elemento.style.display = 'block';
} else {
  elemento.style.display = 'none';
}

En este ejemplo, alternamos entre ocultar y mostrar el elemento html con la identificación 'miElemento' según su valor actual de estilo de visualización.

Ejemplos prácticos

Ocultar o mostrar elementos html según la selección de la lista desplegable

<select id="miLista">
  <option value="opcion1">Opción 1</option>
  <option value="opcion2">Opción 2</option>
</select>

<div id="miElemento">
  Este elemento se mostrará si se selecciona la opción 2.
</div>

<script>
  var lista = document.getElementById('miLista');
  var elemento = document.getElementById('miElemento');
  elemento.style.display = 'none';
  
  lista.addEventListener('change', function() {
    if (lista.value === 'opcion2') {
      elemento.style.display = 'block';
    } else {
      elemento.style.display = 'none';
    }
  });
</script>

En este ejemplo, ocultamos el elemento html 'miElemento' al cargar la página. Luego agregamos un controlador de eventos al elemento de selección de lista desplegable 'miLista'. Cuando se selecciona la opción 2, mostramos el elemento 'miElemento'. De lo contrario, lo ocultamos.

Ocultar o mostrar elementos html según la longitud del texto

<textarea id="miTexto" rows="8" cols="40"></textarea>

<div id="miElemento">
  Este elemento se mostrará si el texto es más largo que 10 caracteres.
</div>

<script>
  var texto = document.getElementById('miTexto');
  var elemento = document.getElementById('miElemento');
  elemento.style.display = 'none';
  
  texto.addEventListener('input', function() {
    if (texto.value.length > 10) {
      elemento.style.display = 'block';
    } else {
      elemento.style.display = 'none';
    }
  });
</script>

En este ejemplo, ocultamos el elemento 'miElemento' al cargar la página. Luego agregamos un controlador de eventos al elemento de entrada de texto 'miTexto'. Cuando el texto es más largo que 10 caracteres, mostramos el elemento 'miElemento'. De lo contrario, lo ocultamos.