Como alterar a cor do texto em JavaScript

JavaScript é uma linguagem dinâmica que fornece várias opções de programação para executar várias tarefas. Por exemplo, mudar a cor de um elemento é uma das tarefas mais frequentes ao desenvolver um site. Para fazer isso, primeiro, obtenha a referência ao elemento html que você deseja alterar a cor e depois atribui -lhe o valor da cor no atributo de cor do estilo javascript.

Este estudo ilustrará os métodos para alterar a cor do texto em JavaScript.

Como alterar a cor do texto em JavaScript?

Para alterar a cor do texto em JavaScript, use os métodos JavaScript predefinidos abaixo mencionados:

• estilo.Propriedade colorida com método getElementById ()
• estilo.Propriedade colorida com método de queryselector ()

Vamos explicar esses métodos individualmente.

Método 1: Alterar a cor do texto usando o estilo.Propriedade colorida com método getElementById ()

Para mudar a cor do texto, você pode usar o “getElementById ()”Método com o“estilo.cor" propriedade. Nesse cenário, o elemento de texto pode ser acessado usando o método getElementById () e depois aplicar o atributo de cor com a ajuda do estilo HTML.propriedade colorida.

Sintaxe

Use a sintaxe dada para alterar a cor do texto usando a propriedade Color com a ajuda do método getElementById ():

documento.getElementById ("id").estilo.color = "cor";

O "eu iaӃ o ID do elemento especificado para acessar o elemento de texto e alterar sua cor usando o estilo.propriedade colorida.

Siga em direção ao exemplo abaixo para entender o conceito declarado!

Exemplo

Primeiro, vamos criar um título usando

Tag e atribua um ID “eu ia”Que é usado para acessar o elemento H4 e, em seguida, crie um botão que invoca uma função chamada“mudar cor()”Definido em um arquivo JavaScript (JS) quando o evento OnClick do botão adicionado é acionado:

Bem -vindo ao Linuxhint

Clique para ver a mágica

No arquivo JS, defina uma função chamada “mudar cor()”E obtenha o cabeçalho passando seu ID para o método getElementById () e depois altere sua cor:

função chanGecolor ()
documento.getElementById ("id").estilo.color = "vermelho";

Por fim, especifique a fonte do arquivo JavaScript usando a tag SRC no arquivo HTML:

Pode ser visto na saída que, quando o botão adicionado é clicado, o elemento de texto mudou sua cor para “vermelho”:

Vamos verificar o outro método!

Método 2: Alterar a cor do texto usando o estilo.Propriedade colorida com método de queryselector ()

Você também pode alterar a cor do texto usando o “QuerySelector ()”Método com estilo.propriedade colorida. Ele acessa o elemento com o ID ou a classe atribuída, enquanto o método getElementById () apenas busca o elemento com seu ID atribuído.

Sintaxe

Use a seguinte sintaxe para alterar a cor do texto usando a propriedade Color com a ajuda do método QuerySelector ():

documento.QuerySelector ("Id/ClassName").estilo.color = "cor";

Exemplo

Aqui, vamos usar o

tag para adicionar um parágrafo com a classe chamada “cor”, Isso ajudará a acessar o

elemento e um botão que chamará o JavaScript “mudar cor()”Método quando seu evento OnClick será acionado:

Bem -vindo ao Linuxhint

Clique para ver a mágica

Na definição de “mudar cor()”Método, invocaremos o“QuerySelector ()”Método passando o nome da classe com ponto (.) Isso indica que o elemento é acessado com base no nome da classe e aplique a propriedade colorida nele:

função chanGecolor ()
documento.QuerySelector (".cor").estilo.color = "magenta";

No entanto, para usar um ID em um elemento HTML e acessar -o usando o método querySelector (), adicione o “#”Assine com o nome de identificação:

documento.QuerySelector ("#cor").estilo.color = "magenta";

Saída

Reunimos a abordagem mais simples para alterar a cor do texto em JavaScript.

Conclusão

Para alterar a cor do texto, você pode usar o estilo.Propriedade colorida com a ajuda do método getElementById () ou o método QuerySelector (). O método getElementById () é usado para acessar o elemento HTML com base em seu ID atribuído, enquanto o método QuerySelector () acessa o elemento com base no ID atribuído ou na classe especificando (#) ou (.) sinais, respectivamente. Este estudo ilustrou o procedimento simples para alterar a cor do texto em JavaScript.