Questo studio illustrerà i metodi per cambiare il colore del testo in JavaScript.
Come modificare il colore del testo in JavaScript?
Per modificare il colore del testo in JavaScript, utilizzare i metodi JavaScript predefiniti indicati di seguito:
Spieghiamo questi metodi individualmente.
Metodo 1: modifica del colore del testo utilizzando la proprietà style.color con il 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 color con l'aiuto della proprietà HTML style.color.
Sintassi
Utilizzare la sintassi indicata per modificare il colore del testo utilizzando la proprietà color con l'aiuto del metodo getElementById():
documento. getElementById ( 'id' ) . stile . colore = 'colore' ;Il ' id ” è l'ID dell'elemento specificato per accedere all'elemento di testo e quindi cambiarne il colore utilizzando la proprietà style.color.
Dirigiti verso l'esempio seguente per comprendere il concetto dichiarato!
Esempio
Per prima cosa, creeremo un'intestazione usando tagga e assegna un ID “ id ” utilizzato per accedere all'elemento h4, quindi, creare un pulsante che richiami una funzione denominata “ cambia colore() ” definito in un file JavaScript(JS) quando viene attivato l'evento onclick del pulsante aggiunto:
< h4 id = 'id' > Benvenuto in LinuxHint h4 >< tipo di pulsante = 'pulsante' al clic = 'cambia colore()' > Clicca per vedere la magia pulsante >
Nel file JS, definisci una funzione denominata ' cambia colore() ” e ottenere l'intestazione passando il suo id al metodo getElementById() e quindi cambiarne il colore:
funzione cambia Colore ( ) {documento. getElementById ( 'id' ) . stile . colore = 'rosso' ;
}
Infine, specifica l'origine del file JavaScript utilizzando il tag src nel file HTML:
< script src = './JSfile.js' > sceneggiatura >Si può vedere dall'output che quando si fa clic sul pulsante aggiunto, l'elemento di testo cambia colore in ' rosso ”:
Diamo un'occhiata all'altro metodo!
Metodo 2: modifica del colore del testo utilizzando la proprietà style.color con il metodo querySelector()
Puoi anche cambiare il colore del testo usando ' querySelector() ” con proprietà style.color. Accede all'elemento sia con l'id che con la classe assegnata mentre il metodo getElementById() recupera semplicemente l'elemento con il suo id assegnato.
Sintassi
Utilizzare la seguente sintassi per modificare il colore del testo utilizzando la proprietà color con l'aiuto del metodo querySelector():
documento. querySelector ( 'id/nomeclasse' ) . stile . colore = 'colore' ;Esempio
Qui useremo il tag per aggiungere un paragrafo con classe denominata “ colore ”, che aiuterà ad accedere all'elemento
e un pulsante che chiamerà JavaScript “ cambia colore() ” quando verrà attivato il relativo evento onclick:
< p classe = 'colore' > Benvenuto in LinuxHint p >< pulsante con un clic = 'cambia colore()' > Clicca per vedere la magia pulsante >
Nella definizione del “ cambia colore() ” metodo, invocheremo il “ querySelector() ” passando il nome della classe con dot(.) che indica che si accede all'elemento in base al nome della sua classe, quindi applicare la proprietà color su di esso:
funzione cambia Colore ( ) {documento. querySelector ( '.colore' ) . stile . colore = 'Magenta' ;
}
Tuttavia, per utilizzare un id in un elemento HTML e accedervi utilizzando il metodo querySelector(), aggiungi il ' # ” segno con nome ID:
documento. querySelector ( '#colore' ) . stile . colore = 'Magenta' ;Produzione
Abbiamo raccolto l'approccio più semplice per cambiare il colore del testo in JavaScript.
Conclusione
Per modificare il colore del testo, puoi utilizzare la proprietà style.color con l'aiuto del metodo getElementById() o del 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 rispettivamente i segni (#) o (.). Questo studio ha illustrato la semplice procedura per modificare il colore del testo in JavaScript.