Como alterar a cor do botão em clique em javascript

Em JavaScript, geralmente queremos criar páginas da web personalizadas envolvendo várias funcionalidades para um design atraente. Por exemplo, no caso de notificar o usuário de qualquer operação bem -sucedida, aviso ou notificações de erro. Em tais cenários, alterar a cor do botão em clique em javascript é um recurso significativo para obter a atenção do usuário e notificá -los dos alertas específicos de antemão.

Este artigo discutirá os métodos para alterar a cor de um botão em clique em javascript.

Como alterar a cor do botão, clique em JavaScript?

Para alterar a cor da cor do botão no clique em JavaScript, o “estilo.cor de fundo”A propriedade pode ser usada com:

• ““ONCLICKEvento
• ““indexação”
• ““QuerySelector () método

Agora passaremos por cada uma das metodologias listadas uma por uma!

Método 1: Alterar a cor do botão após o clique em JavaScript usando o evento "OnClick"

O estilo.BackgroundColor Property Ajusta a cor de fundo do elemento especificado usando codificação de cores. É aplicado para definir a cor em relação aos valores de vermelho, verde e azul (RGB). Mais especificamente, você pode utilizar o “ONCLICK”De tal maneira que, quando um botão é clicado, o código de cores adicionado será aplicado como seu plano de fundo.

O exemplo a seguir explica claramente o conceito declarado.

Exemplo

Em primeiro lugar, crie um botão com o “botão" eu ia. Então, adicione “ONCLICKEvento que acionará o “cor do botao()”Função quando o botão adicionado é clicado:

Em seguida, declare uma função chamada “cor do botao()”. Em sua definição, acesse o botão usando o documento.botão geelementbyId () e aplique o estilo.Propriedade de BackgroundColor para definir a cor do botão. Você pode atribuir qualquer código de cores RGB como seu plano de fundo:

A implementação acima mostrará a seguinte saída:

Deseja definir mais de uma cor de fundo em um botão? Se sim, siga a próxima seção!

Método 2: Alterar a cor do botão em um clique em JavaScript usando a indexação

““Indexação”É uma técnica aplicada para iterar ao longo de uma matriz ou listar itens especificando seus índices. Ele pode ser aplicado para definir um conjunto de cores e alterar a cor do botão em relação aos elementos adicionados. Mais especificamente, você pode anexar um método addEventListener () de tal maneira quando um botão é clicado; Sua cor de fundo será alterada de acordo com a cor adicionada.

Veja o exemplo a seguir para demonstração.

Exemplo

Em primeiro lugar, criaremos um botão com o “Clique aqui" valor:

Em seguida, o botão será acessado especificando seu ID no documento.getElementById () Método:

Agora, as variáveis ​​index0 e index1 serão declaradas com os valores “0" e "1”Respectivamente:

Depois disso, uma variedade de duas cores será definida e armazenada em uma variável chamada “cores”:

Finalmente, um “clique”O evento será anexado ao botão criado, invocando o“addEventListener ()”Método. Isso funcionará de tal maneira que, quando o botão for clicado, o método ButtonColor () será invocado, o que alterará a cor do plano de fundo de acordo com o índice das cores adicionadas na matriz:

Como você pode ver na saída fornecida, quando o botão é clicado, sua cor de fundo é definida pela primeira vez como “verde" então "azul”:

Método 3: Alterar a cor do botão ao clicar em JavaScript usando “documento.QuerySelector () ”Método

O "documento.QuerySelector ()”O método busca o primeiro elemento que corresponde a um seletor CSS e o“addEventListener ()”O método inclui e aplica um evento específico a um elemento. Esses métodos podem ser utilizados para acessar o ID do botão, adicione o manipulador de eventos de clique e defina a cor do botão de fundo do botão.

Veja o exemplo a seguir para demonstração.

Exemplo

No exemplo a seguir, inclua um botão com o valor especificado, conforme discutido nos métodos anteriores:

Agora, aplique o documento.Método querySelector () para acessar o botão com “sucesso" eu ia:

Por fim, aplique o addEventListener () para adicionar um manipulador de eventos chamado “clique”Para o botão e defina sua cor como“Luz verde”Usando o estilo.BackgroundColor Property:

Saída

Fornecemos os métodos mais fáceis para alterar a cor do botão, clique em JavaScript.

Conclusão

Para alterar a cor do botão em JavaScript, você pode utilizar o estilo.Propriedade de BackgroundColor com o código de cores, que é o valor RGB. Para fazer isso, invocar o documento.getElementById () Método para acessar o botão criado e depois executar outras operações. O documento.querySelector () também é usado para o mesmo objetivo. Além disso, a técnica de indexação também pode ser utilizada para aplicar várias cores de fundo. Este manual orientou a alterar a cor do botão em clique em javascript.