Ocultar y mostrar elementos DOM usando una clase CSS en JavaScript

Hace unos días, escribí un artículo sobre cómo ocultar y mostrar elementos DOM usando estilos en línea en JavaScript. Hoy aprenderá a ocultar y mostrar elementos usando clases CSS en JavaScript.

Primero declaremos una clase CSS simple que oculta el elemento, si se aplica, configurando display: none :

.hidden {
    display: none;
}

A continuación, digamos que tenemos el siguiente <button> elemento:

<button class="btn">Click Me</button>

Ahora, si quieres ocultar el botón de arriba del DOM, solo agrega el hidden clase usando el add() método proporcionado por el objeto classList, como a continuación:

// grab button element
const button = document.querySelector('.btn');

// hide it
button.classList.add('hidden');

Para mostrar el elemento de nuevo, simplemente elimina el hidden clase usando el classList.remove() método:

button.classList.remove('hidden');

Si bien los estilos en línea funcionan perfectamente para alternar la visibilidad del elemento, la clase CSS le brinda más flexibilidad para controlar el comportamiento de esta manera.

Creando hide() &Show() Métodos

El classList object proporciona una serie de métodos para agregar, eliminar y alternar clases CSS de un elemento en JavaScript estándar.

Usemos classList para crear nuestro propio hide() similar a jQuery , show() y toggle() métodos en JavaScript puro:

// hide an element
const hide = (elem) => {
    elem.classList.add('hidden');
}

// show an element
const show = (elem) => {
    elem.classList.remove('hidden');
}

// toggle the element visibility
const toggle = (elem) => {
    elem.classList.toggle('hidden');
}

Ahora, si desea ocultar o mostrar cualquier elemento DOM, simplemente llame al método anterior:

// hide
hide(document.querySelector('.btn'));

// show
show(document.querySelector('.btn'));

// toggle
toggle(document.querySelector('.btn'));

Eche un vistazo a esta guía para obtener más información sobre el manejo de clases CSS en JavaScript estándar.