Altere a cor de fundo de um campo de entrada usando JavaScript

Enquanto desenvolvem sites, a maioria dos desenvolvedores prefere estilizar páginas da web alterando a cor do texto, a cor de fundo de uma página da web ou elementos HTML como botões, campos de entrada e assim por diante. Para fazer isso, os desenvolvedores usam CSS. No entanto, pode haver um requisito para adicionar estilo às páginas da web usando JavaScript. Para esse fim, você pode utilizar o “estilo.fundoPropriedade CSS no código JavaScript.

Esta postagem definirá o método para alterar a cor de fundo de um campo de entrada usando JavaScript.

Como alterar a cor de fundo de um campo de entrada usando JavaScript?

Use o JavaScript "estilo.fundoPropriedade CSS para alterar a cor de fundo de qualquer elemento, como o campo de entrada. Um valor de cor único é utilizado para especificar o atributo de cor de fundo.

Sintaxe
Siga a sintaxe dada para alterar a cor de fundo de um campo de entrada:

elemento.estilo.BackgroundColor = "Color"

Na sintaxe acima, adicione a cor usando o nome ou o código de cores RGB.

Exemplo: Altere a cor de fundo de um campo de entrada em um botão Clique
Primeiro, adicione um campo de entrada e um botão no arquivo html usando as tags e as tags. Anexe um evento de clique no botão que acionará uma função chamada "color ()", que mudará a cor do campo de texto quando o botão for clicado:

Altere a cor de fundo de um campo de entrada em um botão Clique

Clique

Depois de executar o código HTML, a saída será a seguinte:

No arquivo JavaScript, primeiro, defina a função “cor”Que buscará o campo de entrada especificando seu ID no“getElementById ()”Método e depois defina a cor de fundo“rosa”:

função color ()
var input = documento.getElementById ('txt');
entrada.estilo.BackgroundColor = 'Pink';

Saída

O GIF acima mostra a cor de fundo do campo de entrada é alterada quando o botão é clicado.

Dica de bônus
Você também pode usar o “Rgb”Valores para alterar a cor do fundo da seguinte forma:

entrada.estilo.AntecedentesColor = 'rgb (' + 233 + ',' + 185+ ',' + 193 + ')';

Saída

Reunimos as instruções relacionadas à alteração da cor de fundo de um campo de entrada usando JavaScript.

Conclusão

Para alterar a cor de fundo de um campo de entrada, use o “estilo.fundoPropriedade CSS. Usando esta propriedade, você pode definir a cor do atributo em segundo plano usando o código de cores RGB ou o nome da cor. Este post definiu o método para alterar a cor de fundo de um campo de entrada usando JavaScript.