Cambia il colore di sfondo di un campo di input usando JavaScript

Durante lo sviluppo di siti Web, la maggior parte degli sviluppatori preferisce modellare le pagine Web modificando il colore del testo, il colore di sfondo di una pagina Web o elementi HTML come pulsanti, campi di input e così via. Per fare ciò, gli sviluppatori usano CSS. Tuttavia, può esserci l'obbligo di aggiungere uno stile alle pagine Web utilizzando JavaScript. A tale scopo, puoi utilizzare il "stile.sfondo"Proprietà CSS nel codice JavaScript.

Questo post definirà il metodo per modificare il colore di sfondo di un campo di input usando JavaScript.

Come modificare il colore di sfondo di un campo di input usando JavaScript?

Usa JavaScript "stile.sfondo"Proprietà CSS per modificare il colore di sfondo di qualsiasi elemento, come il campo di input. Viene utilizzato un valore a colori singolo per specificare l'attributo di colore in background.

Sintassi
Seguire la sintassi data per modificare il colore di sfondo di un campo di input:

elemento.stile.SfondoColor = "Color"

Nella sintassi sopra, aggiungi il colore usando il suo nome o codice colore RGB.

Esempio: modificare il colore di sfondo di un campo di input su un pulsante Click
Innanzitutto, aggiungi un campo di input e un pulsante nel file HTML utilizzando i tag. Allega un clic di clic al pulsante che attiverà una funzione chiamata "Color ()", che cambierà il colore del campo di testo quando si fa clic sul pulsante:

Modifica il colore di sfondo di un campo di input su un pulsante Click

Clic

Dopo aver eseguito il codice HTML, l'output sarà il seguente:

Nel file JavaScript, in primo luogo, definisci la funzione "colore"Che prenderà il campo di input specificando il suo ID in"getElementById ()"Metodo, quindi imposta il colore di sfondo su"rosa":

function color ()
var input = document.getElementById ('txt');
ingresso.stile.backgroundColor = 'rosa';

Produzione

Il GIF sopra mostra che il colore di sfondo del campo di input viene modificato quando viene fatto clic sul pulsante.

Suggerimento bonus
Puoi anche usare il “RGB"Valori per modificare il colore di sfondo come segue:

ingresso.stile.backgroundColor = 'rgb (' + 233 + ',' + 185+ ',' + 193 + ')';

Produzione

Abbiamo raccolto le istruzioni relative alla modifica del colore di sfondo di un campo di input usando JavaScript.

Conclusione

Per modificare il colore di sfondo di un campo di input, utilizzare il “stile.sfondo"Proprietà CSS. Utilizzando questa proprietà, è possibile impostare il colore dell'attributo di sfondo utilizzando il codice colore RGB o il nome del colore. Questo post ha definito il metodo per modificare il colore di sfondo di un campo di input usando JavaScript.