Tämä tutkimus havainnollistaa menetelmiä tekstin värin muuttamiseen JavaScriptissä.
Kuinka muuttaa tekstin väriä JavaScriptissä?
Jos haluat muuttaa JavaScriptin tekstin väriä, käytä alla mainittuja ennalta määritettyjä JavaScript-menetelmiä:
- style.color-ominaisuus getElementById()-menetelmällä
- style.color-ominaisuus querySelector()-menetelmällä
Selitetään nämä menetelmät yksitellen.
Tapa 1: Muuta tekstin väriä style.color-ominaisuuden avulla getElementById()-menetelmällä
Voit muuttaa tekstin väriä käyttämällä ' getElementById() ' menetelmällä ' tyyli.väri ” omaisuutta. Tällaisessa skenaariossa tekstielementtiin pääsee käsiksi getElementById()-menetelmällä ja sitten käyttää color-attribuuttia HTML style.color -ominaisuuden avulla.
Syntaksi
Käytä annettua syntaksia muuttaaksesi tekstin väriä käyttämällä color-ominaisuutta getElementById()-menetelmän avulla:
asiakirja. getElementById ( 'id' ) . tyyli . väri- = 'väri' ;' id ” on elementin tunnus, joka on määritetty käyttämään tekstielementtiä ja muuttamaan sen väriä style.color-ominaisuuden avulla.
Siirry alla olevaan esimerkkiin ymmärtääksesi esitetyn käsitteen!
Esimerkki
Ensin luomme otsikon käyttämällä merkitse ja anna tunnus ' id ', jota käytetään pääsemään h4-elementtiin, luo sitten painike, joka kutsuu toiminnon nimeltä ' Vaihda väri() ' määritetty JavaScript (JS) -tiedostossa, kun lisätyn painikkeen onclick-tapahtuma käynnistyy:
< h4 id = 'id' > Tervetuloa LinuxHintiin h4 >< painikkeen tyyppi = 'painike' klikkaamalla = 'Vaihda väri()' > Napsauta nähdäksesi taikuuden -painiketta >
Määritä JS-tiedostossa funktio nimeltä ' Vaihda väri() ' ja hanki otsikko välittämällä sen tunnus menetelmälle getElementById() ja muuta sitten sen väriä:
toiminto muuttaa väriä ( ) {asiakirja. getElementById ( 'id' ) . tyyli . väri- = 'punainen' ;
}
Lopuksi määritä JavaScript-tiedoston lähde käyttämällä HTML-tiedoston src-tunnistetta:
< script src = './JSfile.js' > käsikirjoitus >Tulosteesta näkyy, että kun lisättyä painiketta napsautetaan, tekstielementin väri muuttui ' punainen ':
Katsotaanpa toinen tapa!
Tapa 2: Muuta tekstin väriä style.color-ominaisuuden avulla querySelector()-menetelmällä
Voit myös muuttaa tekstin väriä käyttämällä ' querySelector() ”-menetelmä style.color-ominaisuuden kanssa. Se käyttää elementtiä sekä tunnuksella että määritetyllä luokalla, kun taas getElementById()-metodi vain hakee elementin sille määritetyllä tunnuksella.
Syntaksi
Käytä seuraavaa syntaksia muuttaaksesi tekstin väriä väriominaisuuden avulla querySelector()-menetelmän avulla:
asiakirja. querySelector ( 'id/className' ) . tyyli . väri- = 'väri' ;Esimerkki
Tässä käytämme tagi lisätäksesi kappaleen, jonka luokka on ' väri- ”, joka auttaa pääsemään
-elementtiin ja painikkeeseen, joka kutsuu JavaScriptiä Vaihda väri() ” -menetelmää, kun sen onclick-tapahtuma käynnistyy:
< s luokkaa = 'väri' > Tervetuloa LinuxHintiin s >< painiketta onclick = 'Vaihda väri()' > Napsauta nähdäksesi taikuuden -painiketta >
' Vaihda väri() ' -menetelmää, kutsumme ' querySelector() ” -menetelmää välittämällä luokan nimen pisteellä (.), joka osoittaa, että elementtiä käytetään sen luokan nimen perusteella, ja lisää sitten siihen väriominaisuutta:
toiminto muuttaa väriä ( ) {asiakirja. querySelector ( '.väri' ) . tyyli . väri- = 'Magenta' ;
}
Jos haluat kuitenkin käyttää tunnusta HTML-elementissä ja käyttää sitä querySelector()-menetelmällä, lisää ' # ”kyltti id-nimellä:
asiakirja. querySelector ( '#väri' ) . tyyli . väri- = 'Magenta' ;Lähtö
Olemme koonneet yksinkertaisimman tavan muuttaa tekstin väriä JavaScriptissä.
Johtopäätös
Tekstin värin vaihtamiseen voit käyttää style.color-ominaisuutta getElementById()- tai querySelector()-metodin avulla. Menetelmää getElementById() käytetään HTML-elementtiin sen määritetyn id:n perusteella, kun taas querySelector()-metodi käyttää elementtiä määritetyn id:n tai luokan perusteella määrittämällä (#) tai (.) merkit, vastaavasti. Tämä tutkimus havainnollistaa yksinkertaista toimenpidettä tekstin värin muuttamiseksi JavaScriptissä.