Endre bakgrunnsfargen på et inngangsfelt ved hjelp av JavaScript

Mens de utvikler nettsteder, foretrekker de fleste utviklere å style websider ved å endre tekstfargen, bakgrunnsfargen på en webside eller HTML -elementer som knapper, inndatafelt og så videre. For å gjøre dette bruker utviklere CSS. Imidlertid kan det være et krav å legge til styling på websider ved hjelp av JavaScript. For dette formålet kan du bruke "stil.bakgrunn”CSS -egenskap i JavaScript -koden.

Dette innlegget vil definere metoden for å endre bakgrunnsfargen på et inngangsfelt ved hjelp av JavaScript.

Hvordan endre bakgrunnsfargen på et inngangsfelt ved hjelp av JavaScript?

Bruk JavaScripts “stil.bakgrunn”CSS -egenskap for å endre ethvert elements bakgrunnsfarge, for eksempel inngangsfeltet. En enfargeverdi brukes til å spesifisere bakgrunnsfargeattributtet.

Syntaks
Følg den gitte syntaks for å endre bakgrunnsfargen på et inngangsfelt:

element.stil.BakgrunnColor = "Farge"

I syntaks ovenfor, legg til fargen ved å bruke navnet eller RGB -fargekoden.

Eksempel: Endre bakgrunnsfargen på et inngangsfelt på et knappeklikk
Først må du legge til et inngangsfelt og en knapp i HTML -filen ved hjelp av og taggene. Fest en klikkhendelse til knappen som vil utløse en funksjon som heter “Color ()”, som vil endre fargen på tekstfeltet når knappen er klikket:

Endre bakgrunnsfargen på et inngangsfelt på et knappeklikk

Klikk

Etter å ha utført HTML -koden, vil utgangen være som følger:

I JavaScript -filen, først, definere funksjonen "farge”Som vil hente inngangsfeltet ved å spesifisere IDen sin i“getElementById ()”Metode, og sett deretter bakgrunnsfargen til“rosa”:

funksjon farge ()
var input = dokument.getElementById ('txt');
inngang.stil.BakgrunnColor = 'Pink';

Produksjon

Ovennevnte GIF viser inngangsfeltets bakgrunnsfarge endres når knappen er klikket.

Bonus tips
Du kan også bruke “RGB”Verdier for å endre bakgrunnsfargen som følger:

inngang.stil.BakgrunnColor = 'RGB (' + 233 + ',' + 185+ ',' + 193 + ')';

Produksjon

Vi har samlet instruksjonene relatert til å endre bakgrunnsfargen på et inngangsfelt ved hjelp av JavaScript.

Konklusjon

For å endre bakgrunnsfargen på et inngangsfelt, bruk "stil.bakgrunn”CSS -eiendom. Ved hjelp av denne egenskapen kan du angi fargen på bakgrunnsattributtet ved hjelp av RGB -fargekoden eller fargenavnet. Dette innlegget definerte metoden for å endre bakgrunnsfargen på et inngangsfelt ved hjelp av JavaScript.