Cómo alternar una clase de elementos en JavaScript?

La palabra "palanca" significa cambiar entre opciones. Alternar una clase de elemento se refiere a cambiar una clase con otra clase. Para este propósito, el palanca() Se emplea el método para agregar o eliminar una clase. Es útil para mostrar contenido en páginas web. Devuelve un valor verdadero si se le agrega una clase. Mientras que devuelve un valor falso para eliminar una clase. Además, los usuarios pueden utilizar agregar (), contener (), y eliminar() Métodos para alternar una clase de elementos. En la guía de hoy, aprenderá a alternar una clase de elementos en JavaScript de las siguientes maneras:

• Uso del método toggle () en JavaScript
• Usando los métodos add (), eliminar () y contener () en JavaScript

Cómo alternar una clase de elementos en JavaScript?

Como otros lenguajes de programación, Javascript Proporciona una variedad de características para mostrar contenido en páginas web. Para la visibilidad del contenido del sitio web, utiliza una característica del palanca() método. El método toma una entrada del nombre de la clase y la alterna con la ayuda de elementos HTML.

Sintaxis

elemento.Lista de clase.Toggle (ClassName)

JavaScript puede alternar la clase del elemento nombre de la clase empleando el Lista de clase propiedad. La propiedad tiene datos actualizados si se elimina o se agrega la clase. Utilizando el elemento HTML, los usuarios pueden explorar el palanca() método.

Método 1: Uso del método toggle () en JavaScript

Se demuestra un ejemplo utilizando el palanca() Método en JavaScript.

Código

Un ejemplo de alternar una clase de elemento en JavaScript

presiona el botón
Bienvenido a JavaScript World.

La descripción del código anterior está aquí:

Un botón llamado "presiona el botón"Está unido con un myFunction () método. En este método, se utiliza un método toggle () pasando las propiedades de "estilo". Después de presionar el botón, se llama al método toggle () y aplica las propiedades de estilo al mensaje "Bienvenido a JavaScript World".

Producción

Antes de presionar el botón:

Después de ejecutar el código anterior, la salida muestra un botón "presiona el botón". Además, se muestra un mensaje aquí "Bienvenido a JavaScript World".

Después de presionar el botón:

Después de presionar el botón, el código JavaScript se ejecuta en el backend y alterna el elemento DIV a "estilo". Después de eso, se observa que se incluyen varios estilos en el div.

Método 2: Uso de métodos add (), eliminar () y contener ()

Otro ejemplo se adapta utilizando los métodos contener (), eliminar () y agregar () en JavaScript.

Código

Otro ejemplo de alternar un elemento de clase

Haz click en mi

Bienvenido a JavaScript World

La descripción del código es la siguiente.

• En este código, u_method () se usa para obtener el elemento HTML en el pag variable.
• Después de eso, el contener() El método se utiliza para evaluar si el método está activado o no.
• Si contiene el evento, use el eliminar() método para deshabilitar el evento.
• De lo contrario, el agregar() El método se utiliza para agregar el evento de alternar.

Producción

Antes de presionar el botón:

Después de presionar el botón "Por favor presione el botón", un elemento de clase se alterne usando el agregar eliminar(), y contener() Métodos en JavaScript.

Después de presionar el botón:

Al hacer clic en el "Por favor presione el botón" botón, un mensaje "Bienvenido al mundo de JavaScript" se muestra utilizando el agregar eliminar(), y contener() Métodos en JavaScript.

Conclusión

Alternar un clase de elemento es un proceso de agregar o eliminar una clase utilizando los elementos en JavaScript. Para alternar una clase de elemento en JavaScript, puede usar el método toggle () o utilizar add (), remove () y contener () métodos. La clase contiene un conjunto de propiedades que se aplican a los elementos.