Cómo cambiar el color del botón Al hacer clic en JavaScript

En JavaScript, a menudo queremos crear páginas web personalizadas que involucren varias funcionalidades para un diseño atractivo. Por ejemplo, en el caso de notificar al usuario de cualquier operación exitosa, advertencia o notificaciones de error. En tales escenarios, cambiar el color del botón al hacer clic en JavaScript es una característica significativa para llamar la atención del usuario y notificarles las alertas específicas de antemano.

Este artículo discutirá los métodos para cambiar el color de un botón al hacer clic en JavaScript.

Cómo cambiar el color del botón Al hacer clic en JavaScript?

Para cambiar el color del color del botón al hacer clic en JavaScript, el "estilo.color de fondo"La propiedad se puede usar con:

• "al hacer clic" evento
• "indexación"
• "QuerySelector () método

Ahora pasaremos por cada una de las metodologías enumeradas una por una!

Método 1: Cambiar el color del botón Al hacer clic en JavaScript usando el evento "OnClick"

El estilo.La propiedad de BackgroundColor ajusta el color de fondo del elemento especificado utilizando la codificación de color. Se aplica para establecer el color con respecto a los valores de rojo, verde y azul (RGB). Más específicamente, puede utilizar el "al hacer clic"De tal manera que cuando se haga clic en un botón, el código de color agregado se aplicará como fondo.

El siguiente ejemplo explica el concepto declarado claramente.

Ejemplo

En primer lugar, cree un botón con el "botón" identificación. Luego añade "al hacer clic"Evento que activará el"color del boton()Función "cuando se hace clic en el botón agregado:

A continuación, declare una función llamada "color del boton()". En su definición, acceda al botón usando el documento.botón geelementByid () y aplicar el estilo.Propiedad de BackgroundColor para establecer el color del botón. Puede asignar cualquier código de color RGB como fondo:

La implementación anterior mostrará la siguiente salida:

Desea configurar más de un color de fondo en un botón? Si es así, siga la siguiente sección!

Método 2: Cambiar el color del botón en un clic en JavaScript usando la indexación

"Indexación"Es una técnica aplicada para iterar a lo largo de una matriz o elementos de la lista especificando sus índices. Se puede aplicar para definir un conjunto de colores y cambiar el color del botón con respecto a los elementos agregados. Más específicamente, puede adjuntar un método AddEventListener () de tal manera cuando se hace clic en un botón; Su color de fondo se cambiará de acuerdo con el color agregado.

Mire el siguiente ejemplo para la demostración.

Ejemplo

En primer lugar, crearemos un botón con el "Haga clic aquí" valor:

A continuación, se accederá al botón especificando su ID en el documento.Método GetElementById ():

Ahora, las variables Index0 e Index1 se declararán con los valores "0" y "1"Respectivamente:

Después de eso, se definirá y almacenará una matriz de dos colores en una variable llamada "colores":

Finalmente, un "hacer clic"El evento se adjuntará al botón creado invocando el"addEventListener ()" método. Esto funcionará de tal manera que cuando se haga clic en el botón, se invocará el método ButtonColor (), que cambiará el color de fondo de acuerdo con el índice de los colores agregados en la matriz:

Como puede ver en la salida dada, cuando se hace clic en el botón, su color de fondo se establece primero en "verde" entonces "azul":

Método 3: Cambiar el color del botón Al hacer clic en JavaScript usando "Documento.método QuerySelector () "

El "documento.QuerySelector ()"El método obtiene el primer elemento que coincide con un selector CSS y el"addEventListener ()"El método incluye y aplica un evento específico a un elemento. Estos métodos se pueden utilizar para acceder a la ID de botón, agregar el controlador de eventos de clic y establecer el color de fondo del botón.

Mire el siguiente ejemplo para la demostración.

Ejemplo

En el siguiente ejemplo, incluya un botón con el valor especificado como se discute en los métodos anteriores:

Ahora, aplique el documento.Método QuerySelector () para acceder al botón que tiene "éxito" identificación:

Por último, aplique addEventListener () para agregar un controlador de eventos llamado "hacer clic"En el botón y configure su color en"Verde claro"Usando el estilo.Propiedad de backgroundcolor:

Producción

Hemos proporcionado los métodos más fáciles para cambiar el color del botón al hacer clic en JavaScript.

Conclusión

Para cambiar el color del botón en JavaScript, puede utilizar el estilo.Propiedad de backgroundcolor con el código de color, que es el valor RGB. Para hacerlo, invoca el documento.método getElementById () para acceder al botón creado y luego realizar más operaciones. El documento.QuerySelector () también se usa para el mismo propósito. Además, la técnica de indexación también se puede utilizar para aplicar múltiples colores de fondo. Este manual guió sobre el cambio del color del botón al hacer clic en JavaScript.