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 mencionados abaixo:
- propriedade style.color com o método getElementById()
- propriedade style.color com o método querySelector()
Vamos explicar esses métodos individualmente.
Método 1: Alterar a cor do texto usando a propriedade style.color com o método getElementById()
Para alterar 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, em seguida, aplicar o atributo color com a ajuda da propriedade style.color do HTML.
Sintaxe
Use a sintaxe fornecida para alterar a cor do texto usando a propriedade color com a ajuda do método getElementById():
documento. getElementById ( 'Eu iria' ) . estilo . cor = 'cor' ;O ' Eu iria ” é o id do elemento especificado para acessar o elemento de texto e depois alterar sua cor usando a propriedade style.color.
Dirija-se ao exemplo abaixo para entender o conceito declarado!
Exemplo
Primeiro, vamos criar um título usando marque e atribua um id “ Eu iria ” que é usado para acessar o elemento h4, então, crie um botão que invoque uma função chamada “ mudar cor() ” definido em um arquivo JavaScript(JS) quando o evento onclick do botão adicionado é acionado:
< h4 id = 'Eu iria' > Bem-vindo ao LinuxHint h4 >< tipo de botão = 'botão' ao clicar = 'mudar cor()' > Clique para ver a magia botão >
No arquivo JS, defina uma função chamada “ mudar cor() ” e obtenha o título passando seu id para o método getElementById() e, em seguida, altere sua cor:
mudança de funçãoCor ( ) {documento. getElementById ( 'Eu iria' ) . estilo . cor = 'vermelho' ;
}
Por fim, especifique a origem do arquivo JavaScript usando a tag src no arquivo HTML:
< script src = './JSfile.js' > roteiro >Pode ser visto na saída que quando o botão adicionado é clicado, o elemento de texto mudou sua cor para “ vermelho ”:
Vamos conferir o outro método!
Método 2: Alterar a cor do texto usando a propriedade style.color com o método querySelector()
Você também pode alterar a cor do texto usando o botão “ querySelector() ” com a propriedade style.color. Ele acessa o elemento com 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. seletor de consulta ( 'id/className' ) . estilo . cor = 'cor' ;Exemplo
Aqui, usaremos o tag para adicionar um parágrafo com a classe chamada “ cor ”, que ajudará a acessar o elemento
e um botão que chamará o JavaScript “ mudar cor() ” quando seu evento onclick será acionado:
< p classe = 'cor' > Bem-vindo ao LinuxHint p >< botão ao clicar = 'mudar cor()' > Clique para ver a magia botão >
Na definição de “ mudar cor() ” método, invocaremos o método “ querySelector() ” passando o nome da classe com ponto(.) que indica que o elemento é acessado com base em seu nome de classe e, em seguida, aplique a propriedade color nele:
mudança de funçãoCor ( ) {documento. seletor de consulta ( '.cor' ) . estilo . cor = 'Magenta' ;
}
No entanto, para usar um id em um elemento HTML e acessá-lo usando o método querySelector(), adicione o “ # ” sinal com nome de identificação:
documento. seletor de consulta ( '#cor' ) . estilo . cor = 'Magenta' ;Resultado
Reunimos a abordagem mais simples para alterar a cor do texto em JavaScript.
Conclusão
Para alterar a cor do texto, você pode usar a propriedade style.color com a ajuda do método getElementById() ou do 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 sinais (#) ou (.), respectivamente. Este estudo ilustrou o procedimento simples para alterar a cor do texto em JavaScript.