Cómo alternar la clase usando JavaScript puro en HTML?

Alternar una clase con JavaScript puro en HTML es útil cuando desea cambiar la apariencia de un elemento basado en una determinada condición, como la interacción del usuario. Por ejemplo, cambiar el color de fondo de la página o botón en el evento de clics. Alternar una clase permite hacer cambios dinámicamente, sin tener que actualizar la página. Esto puede ayudar a aumentar la experiencia del usuario haciendo que los cambios se sientan más suaves y más receptivos.

Esta publicación ilustrará el procedimiento para alternar la clase usando JavaScript.

Cómo alternar la clase CSS usando JavaScript puro en HTML?

Para alternar clases con JavaScript puro, utilice el "palanca()"Método del"Lista de clase"Atributo/propiedad. El método toggle () acepta un nombre de clase como parámetro. Alternar una clase significa cambiar la presencia de una clase en un elemento en HTML. Implica verificar si una clase está presente en un elemento, y si lo está, eliminarla. Si la clase no se asigna al elemento, se agrega.

Ejemplo 1: Cambie el color del elemento al alternar la clase usando JavaScript puro en HTML
En el siguiente ejemplo, cambiaremos el color de fondo del botón en el botón Haga clic alternando la clase.

Primero, cree un botón y asigne una ID "btn"Para peinar el botón. Adjuntar un "al hacer clic"Evento que invocará el"Classtoggle ()"Función en el botón Haga clic:

Botón

En el archivo CSS, cree una ID "btn"Para diseñar el botón:

#btn
relleno: 3px;
margen: 2px;
Font-Family: Sans-Serif;
Radio fronterizo: .5rem;

Crear una clase llamada "amarillo"Para establecer el color de fondo del elemento:

.amarillo
Color de fondo: amarillo;

En el archivo JavaScript, defina una función "Classtoggle ()"Eso llamará al"palanca()"Método del"Lista de clase"Propiedad para alternar clase de botón:

function Classtoggle ()
documento.GetElementById ("BTN").Lista de clase.alternar ("amarillo");

Como puede ver en la salida al hacer clic en el botón, el color de fondo cambia, indica que "amarillo"La clase se ha asignado correctamente al botón utilizando el"palanca()"Método del"Lista de clase" propiedad:

Ejemplo 2: Cambie la fuente del elemento al alternar la clase usando JavaScript puro en HTML
En el ejemplo dado, alternaremos la clase CSS para cambiar el texto en el evento de clic del botón.

En un archivo HTML, cree un

Etiqueta para mostrar algún texto y un botón. Asignar una identificación "bienvenido"Al texto que ayuda a obtener el texto y asignar una clase usando el método de alternar:

Bienvenido a Linuxhint

Hacer clic

Crear una clase CSS "texto"Eso cambiará el color y el tamaño de fuente del texto:

.texto
tamaño de fuente: 30px;
Color: #06b5f5;

Defina una función "Classtoggle ()"Para asignar la clase"texto" hacia

Elemento de etiqueta en el clic del botón que se recuperará utilizando la ID asignada con la ayuda de "getElementById ()" método.

function Classtoggle ()
documento.getElementById ("bienvenido").Lista de clase.toggle ("texto");

Se puede ver que el "texto"La clase se asigna al texto dado haciendo clic en el botón:

Hemos proporcionado todas las instrucciones esenciales relevantes para alternar la clase usando JavaScript puro en HTML.

Conclusión

Para alternar la clase usando JavaScript puro en HTML, use el "palanca()"Método del"Lista de clase" propiedad. Ayuda a asignar una clase al elemento si se le asigna. Esta publicación ilustra el procedimiento para alternar clases con JavaScript.