Modifier la couleur d'arrière-plan d'un champ de saisie à l'aide de JavaScript

Tout en développant des sites Web, la plupart des développeurs préfèrent styliser des pages Web en modifiant la couleur du texte, la couleur d'arrière-plan d'une page Web ou des éléments HTML comme les boutons, les champs d'entrée, etc. Pour ce faire, les développeurs utilisent CSS. Cependant, il peut être nécessaire d'ajouter du style aux pages Web à l'aide de JavaScript. À cette fin, vous pouvez utiliser le «style.arrière-plan»Propriété CSS dans le code JavaScript.

Ce message définira la méthode pour modifier la couleur d'arrière-plan d'un champ de saisie à l'aide de JavaScript.

Comment modifier la couleur d'arrière-plan d'un champ de saisie à l'aide de JavaScript?

Utilisez JavaScript «style.arrière-plan»Propriété CSS pour modifier la couleur d'arrière-plan de tout élément, comme le champ de saisie. Une valeur monoeur est utilisée pour spécifier l'attribut de couleur arrière.

Syntaxe
Suivez la syntaxe donnée pour modifier la couleur d'arrière-plan d'un champ de saisie:

élément.style.backgroundColor = "couleur"

Dans la syntaxe ci-dessus, ajoutez la couleur en utilisant son nom ou son code de couleur RVB.

Exemple: modifiez la couleur d'arrière-plan d'un champ de saisie sur un bouton cliquer
Tout d'abord, ajoutez un champ de saisie et un bouton dans le fichier HTML à l'aide des balises et. Joignez un événement de clic sur le bouton qui déclenchera une fonction appelée "Color ()", qui modifiera la couleur du champ de texte lorsque le bouton est cliqué:

Modifiez la couleur d'arrière-plan d'un champ de saisie sur un bouton cliquer

Cliquez sur

Après avoir exécuté le code HTML, la sortie sera la suivante:

Dans le fichier JavaScript, définissez d'abord la fonction "couleur”Qui va récupérer le champ de saisie en spécifiant son ID dans le«getElementByid ()«Méthode, puis définissez la couleur d'arrière-plan sur«rose»:

Fonction Color ()
Var entrée = document.getElementById ('txt');
saisir.style.BackgroundColor = 'Pink';

Sortir

Le GIF ci-dessus montre que la couleur d'arrière-plan du champ de saisie est modifiée lorsque le bouton est cliqué.

Conseil bonus
Vous pouvez également utiliser le «RVB»Valeurs pour modifier la couleur d'arrière-plan comme suit:

saisir.style.backgroundColor = 'rgb (' + 233 + ',' + 185+ ',' + 193 + ')';

Sortir

Nous avons rassemblé les instructions liées à la modification de la couleur d'arrière-plan d'un champ de saisie à l'aide de JavaScript.

Conclusion

Pour modifier la couleur d'arrière-plan d'un champ de saisie, utilisez le «style.arrière-plan»Propriété CSS. À l'aide de cette propriété, vous pouvez définir la couleur de l'attribut d'arrière-plan à l'aide du code couleur RVB ou du nom de couleur. Ce message a défini la méthode de modification de la couleur d'arrière-plan d'un champ de saisie à l'aide de JavaScript.