Acest studiu va ilustra metodele de schimbare a culorii textului în JavaScript.
Cum se schimbă culoarea textului în JavaScript?
Pentru a schimba culoarea textului în JavaScript, utilizați metodele JavaScript predefinite menționate mai jos:
- proprietate style.color cu metoda getElementById().
- proprietate style.color cu metoda querySelector().
Să explicăm aceste metode individual.
Metoda 1: Schimbați culoarea textului folosind proprietatea style.color cu metoda getElementById()
Pentru a schimba culoarea textului, puteți folosi butonul „ getElementById() ” metoda cu “ stil.culoare ” proprietate. Într-un astfel de scenariu, elementul text poate fi accesat folosind metoda getElementById() și apoi aplicați atributul color cu ajutorul proprietății HTML style.color.
Sintaxă
Utilizați sintaxa dată pentru schimbarea culorii textului folosind proprietatea color cu ajutorul metodei getElementById():
document. getElementById ( 'id' ) . stil . culoare = 'culoare' ;„ id ” este id-ul elementului specificat pentru a accesa elementul text și apoi pentru a-i schimba culoarea folosind proprietatea style.color.
Îndreptați-vă spre exemplul de mai jos pentru a înțelege conceptul declarat!
Exemplu
În primul rând, vom crea un titlu folosind etichetați și atribuiți un ID „ id ” care este folosit pentru a accesa elementul h4, apoi creați un buton care invocă o funcție numită ” schimba culoarea() ” definit într-un fișier JavaScript(JS) atunci când evenimentul onclick al butonului adăugat este declanșat:
< h4 id = 'id' > Bun venit la LinuxHint h4 >< tip de buton = 'buton' onclick = 'schimba culoarea()' > Faceți clic pentru a vedea magia buton >
În fișierul JS, definiți o funcție numită „ schimba culoarea() ” și obțineți antetul pasând id-ul său la metoda getElementById() și apoi schimbați-i culoarea:
funcția changeColor ( ) {document. getElementById ( 'id' ) . stil . culoare = 'roșu' ;
}
În cele din urmă, specificați sursa fișierului JavaScript folosind eticheta src din fișierul HTML:
< script src = „./JSfile.js” > scenariu >Din rezultat se poate observa că atunci când se face clic pe butonul adăugat, elementul de text și-a schimbat culoarea în „ roșu ”:
Să verificăm cealaltă metodă!
Metoda 2: Schimbați culoarea textului folosind proprietatea style.color cu metoda querySelector().
De asemenea, puteți schimba culoarea textului folosind butonul „ querySelector() ” metoda cu proprietate stil.culoare. Accesează elementul atât cu id-ul, cât și cu clasa atribuită, în timp ce metoda getElementById() preia elementul cu id-ul atribuit.
Sintaxă
Utilizați următoarea sintaxă pentru a schimba culoarea textului folosind proprietatea color cu ajutorul metodei querySelector():
document. querySelector ( „id/className” ) . stil . culoare = 'culoare' ;Exemplu
Aici, vom folosi etichetă pentru a adăuga un paragraf cu clasa numită „ culoare ”, care va ajuta la accesarea elementului
și a unui buton care va apela JavaScript „ schimba culoarea() ” atunci când evenimentul său onclick va fi declanșat:
< p clasă = 'culoare' > Bun venit la LinuxHint p >< butonul la clic = 'schimba culoarea()' > Faceți clic pentru a vedea magia buton >
În definiția „ schimba culoarea() ”, vom invoca metoda „ querySelector() ” prin trecerea numelui clasei cu punctul (.) care indică faptul că elementul este accesat pe baza numelui clasei sale, apoi aplică proprietatea de culoare asupra acestuia:
funcția changeColor ( ) {document. querySelector ( '.culoare' ) . stil . culoare = 'magenta' ;
}
Cu toate acestea, pentru a utiliza un id într-un element HTML și a-l accesa folosind metoda querySelector(), adăugați „ # ” semn cu numele ID:
document. querySelector ( '#culoare' ) . stil . culoare = 'magenta' ;Ieșire
Am adunat cea mai simplă abordare pentru a schimba culoarea textului în JavaScript.
Concluzie
Pentru schimbarea culorii textului, puteți folosi proprietatea style.color cu ajutorul metodei getElementById() sau al metodei querySelector(). Metoda getElementById() este folosită pentru a accesa elementul HTML pe baza id-ului alocat acestuia, în timp ce metoda querySelector() accesează elementul pe baza id-ului alocat sau a clasei prin specificarea semnelor (#) sau respectiv (.). Acest studiu a ilustrat procedura simplă de schimbare a culorii textului în JavaScript.