Come cambiare il colore del testo in JavaScript

JavaScript è un linguaggio dinamico che fornisce varie opzioni di programmazione per eseguire più attività. Ad esempio, cambiare il colore di un elemento è uno dei compiti più frequenti mentre si sviluppa un sito Web. Per fare ciò, prima, ottieni il riferimento all'elemento HTML che si desidera modificare il colore, quindi assegnarlo il valore del colore nell'attributo colore in stile JavaScript.

Questo studio illustrerà i metodi per cambiare il colore del testo in JavaScript.

Come cambiare il colore del testo in JavaScript?

Per modificare il colore del testo in JavaScript, utilizzare i metodi JavaScript predefiniti di seguito:

• stile.Proprietà a colori con metodo getElementById ()
• stile.Proprietà a colori con metodo QuerySelector ()

Spieghiamo questi metodi individualmente.

Metodo 1: modificare il colore del testo usando lo stile.Proprietà a colori con metodo getElementById ()

Per cambiare il colore del testo, puoi usare il "getElementById ()Metodo "con il"stile.colore" proprietà. In tale scenario, è possibile accedere all'elemento di testo utilizzando il metodo getElementById () e quindi applicare l'attributo di colore con l'aiuto di HTML Style.Proprietà a colori.

Sintassi

Utilizzare la sintassi data per modificare il colore del testo usando la proprietà a colori con l'aiuto del metodo getElementById ():

documento.getElementById ("id").stile.color = "color";

IL "id"L'ID dell'elemento è specificato per accedere all'elemento di testo e quindi modificare il suo colore usando lo stile.Proprietà a colori.

Dirigiti verso l'esempio seguente per comprendere il concetto dichiarato!

Esempio

Innanzitutto, creeremo un titolo usando

tagga e assegna un ID "id"Viene utilizzato per accedere all'elemento H4, quindi, crea un pulsante che invoca una funzione denominata"cambia colore()"Definito in un file JavaScript (JS) quando viene attivato l'evento OnClick del pulsante aggiunto:

Benvenuti in Linuxhint

Clicca per vedere la magia

Nel file JS, definire una funzione denominata "cambia colore()"E prendi l'intestazione passando il suo ID al metodo getElementById () e quindi cambia il suo colore:

funzione changeColor ()
documento.getElementById ("id").stile.color = "rosso";

Infine, specificare l'origine del file JavaScript utilizzando il tag SRC nel file HTML:

Si può vedere dall'output che quando si fa clic sul pulsante aggiunto, l'elemento di testo ha cambiato il suo colore in "rosso":

Dai un'occhiata all'altro metodo!

Metodo 2: modificare il colore del testo usando lo stile.Proprietà a colori con metodo QuerySelector ()

Puoi anche cambiare il colore del testo usando il “QuerySelector ()"Metodo con stile.Proprietà a colori. Accede all'elemento sia con ID che con la classe assegnata mentre il metodo getElementById () ottiene semplicemente l'elemento con il suo ID assegnato.

Sintassi

Utilizzare la seguente sintassi per modificare il colore del testo usando la proprietà del colore con l'aiuto di QuerySelector () Metodo:

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

Esempio

Qui useremo il

tag per aggiungere un paragrafo con la classe denominata "colore", Ciò contribuirà ad accedere al

Elemento e un pulsante che chiamerà JavaScript "cambia colore()"Metodo quando il suo evento OnClick verrà attivato:

Benvenuti in Linuxhint

Clicca per vedere la magia

Nella definizione di "cambia colore()"Metodo, invoceremo il"QuerySelector ()"Metodo passando dal nome della classe con Dot (.) che indica che l'elemento si accede in base al nome della classe, quindi applica la proprietà del colore su di esso:

funzione changeColor ()
documento.QuerySelector (".colore").stile.color = "magenta";

Tuttavia, per utilizzare un ID in un elemento HTML e accedervi utilizzando il metodo QuerySelector (), aggiungi il “#"Firma con il nome ID:

documento.QuerySelector ("#Color").stile.color = "magenta";

Produzione

Abbiamo raccolto l'approccio più semplice per cambiare il colore del testo in JavaScript.

Conclusione

Per modificare il colore del testo, puoi usare lo stile.Proprietà a colori con l'aiuto del metodo GetElementById () o metodo QuerySelector (). Il metodo getElementById () viene utilizzato per accedere all'elemento HTML in base all'ID assegnato, mentre il metodo QuerySelector () accede all'elemento in base all'ID assegnato o alla classe specificando (#) o (.) segni, rispettivamente. Questo studio ha illustrato la semplice procedura per modificare il colore del testo in JavaScript.