Comment modifier la couleur du bouton en clic dans javascript

En JavaScript, nous voulons souvent créer des pages Web personnalisées impliquant diverses fonctionnalités pour une conception attrayante. Par exemple, dans le cas de la notification de l'utilisateur de toute opération, avertissement ou erreur d'erreur réussie. Dans de tels scénarios, la modification de la couleur du bouton en clic dans JavaScript est une fonctionnalité importante pour attirer l'attention de l'utilisateur et les informer des alertes spécifiques à l'avance.

Cet article discutera des méthodes pour modifier la couleur d'un bouton en clic dans JavaScript.

Comment modifier la couleur du bouton sur Click dans JavaScript?

Pour modifier la couleur de la couleur du bouton sur le clic dans JavaScript, le "style.Couleur de l'arrière plan»La propriété peut être utilisée avec:

• "sur clic" événement
• "indexage"
• "QuerySelector () méthode

Nous allons maintenant passer par chacune des méthodologies énumérées une par une!

Méthode 1: Modifier la couleur du bouton en cliquant sur JavaScript à l'aide de l'événement «OnClick»

Le style.La propriété BackgroundColor ajuste la couleur d'arrière-plan de l'élément spécifié à l'aide du codage couleur. Il est appliqué pour définir la couleur par rapport aux valeurs rouges, vertes et bleues (RVB). Plus précisément, vous pouvez utiliser le «sur clic"De telle manière que lorsqu'un bouton est cliqué, le code de couleur ajouté sera appliqué comme arrière-plan.

L'exemple suivant explique clairement le concept déclaré.

Exemple

Tout d'abord, créez un bouton avec le "bouton" identifiant. Puis ajouter "sur clic”Événement qui déclenchera le"Couleur du bouton()"Fonction lorsque le bouton ajouté est cliqué:

Ensuite, déclarez une fonction nommée «Couleur du bouton()". Dans sa définition, accédez au bouton à l'aide du document.bouton geelementById () et appliquez le style.propriété BackgroundColor pour définir la couleur du bouton. Vous pouvez attribuer n'importe quel code couleur RVB comme arrière-plan:

L'implémentation ci-dessus affichera la sortie suivante:

Vous voulez définir plusieurs couleurs d'arrière-plan sur un bouton? Si oui, suivez la section suivante!

Méthode 2: Modifier la couleur du bouton sur un clic dans javascript à l'aide d'indexation

"Indexage"Est une technique appliquée pour itérer le long d'un tableau ou des éléments de liste en spécifiant leurs index. Il peut être appliqué pour définir un ensemble de couleurs et modifier la couleur du bouton par rapport aux éléments ajoutés. Plus précisément, vous pouvez joindre une méthode AddeveventListener () de manière à ce qu'un bouton est cliqué; sa couleur d'arrière-plan sera modifiée en fonction de la couleur ajoutée.

Regardez l'exemple suivant pour la démonstration.

Exemple

Premièrement, nous créerons un bouton avec le "Cliquez ici" valeur:

Ensuite, le bouton sera accessible en spécifiant son identifiant dans le document.Méthode GetElementById ():

Maintenant, les variables Index0 et Index1 seront déclarées avec les valeurs «0" et "1" respectivement:

Après cela, un tableau de deux couleurs sera défini et stocké dans une variable nommée «couleurs»:

Enfin, un «Cliquez sur»L'événement sera attaché au bouton créé en invoquant le«addEventListener ()" méthode. Cela fonctionnera de telle manière que lorsque le bouton sera cliqué, la méthode ButtonColor () sera invoquée, ce qui modifiera la couleur d'arrière-plan en fonction de l'index des couleurs ajoutées dans le tableau:

Comme vous pouvez le voir dans la sortie donnée, lorsque le bouton est cliqué, sa couleur d'arrière-plan est d'abord définie sur «vert" alors "bleu»:

Méthode 3: Modifier la couleur du bouton en cliquant dans JavaScript à l'aide de «Document.Méthode QueySelector () ”

Le "document.QuerySelector ()»La méthode récupère le premier élément qui correspond à un sélecteur CSS et le« «addEventListener ()»La méthode comprend et applique un événement spécifique à un élément. Ces méthodes peuvent être utilisées pour accéder à l'ID du bouton, ajouter le gestionnaire d'événements de clic et définir la couleur d'arrière-plan du bouton.

Regardez l'exemple suivant pour la démonstration.

Exemple

Dans l'exemple suivant, incluez un bouton avec la valeur spécifiée comme discuté dans les méthodes précédentes:

Maintenant, appliquez le document.Méthode QueySelector () pour accéder au bouton ayant «succès" identifiant:

Enfin, appliquez le AdVEventListener () pour ajouter un gestionnaire d'événements nommé «Cliquez sur"Au bouton et réglez sa couleur sur"Vert clair"Utilisation du style.Propriété BackgroundColor:

Sortir

Nous avons fourni les méthodes les plus faciles pour modifier la couleur des bouton en clic dans JavaScript.

Conclusion

Pour modifier la couleur du bouton en javascript, vous pouvez utiliser le style.propriété BackgroundColor avec le code couleur, qui est la valeur RVB. Pour ce faire, invoquez le document.Méthode GetElementById () pour accéder au bouton créé, puis effectuer d'autres opérations. Le document.queySelector () est également utilisé dans le même but. De plus, la technique d'indexation peut également être utilisée pour appliquer plusieurs couleurs d'arrière-plan. Ce manuel a guidé la modification de la couleur du bouton en clic dans JavaScript.