Ta študija bo ponazorila metode za spreminjanje barve besedila v JavaScriptu.
Kako spremeniti barvo besedila v JavaScriptu?
Za spreminjanje barve besedila v JavaScriptu uporabite spodaj navedene vnaprej določene metode JavaScript:
Razložimo te metode posebej.
1. način: spremenite barvo besedila z uporabo lastnosti style.color z metodo getElementById().
Če želite spremeniti barvo besedila, lahko uporabite » getElementById() ' metoda z ' slog.barva ” lastnina. V takem scenariju lahko do besedilnega elementa dostopate z metodo getElementById() in nato uporabite barvni atribut s pomočjo lastnosti HTML style.color.
Sintaksa
Uporabite podano sintakso za spreminjanje barve besedila z uporabo lastnosti barve s pomočjo metode getElementById():
dokument. getElementById ( 'id' ) . stil . barva = 'barva' ;' id ” je ID elementa, določen za dostop do besedilnega elementa in nato spreminjanje njegove barve z lastnostjo style.color.
Oglejte si spodnji primer, da boste razumeli navedeni koncept!
Primer
Najprej bomo ustvarili naslov z uporabo označite in dodelite ID ' id ', ki se uporablja za dostop do elementa h4, nato ustvarite gumb, ki prikliče funkcijo z imenom ' spremeni barvo() «, definiran v datoteki JavaScript(JS), ko se sproži dogodek onclick dodanega gumba:
< h4 id = 'id' > Dobrodošli v LinuxHint h4 >< vrsta gumba = 'gumb' onclick = 'sprememba barve()' > Kliknite za ogled čarovnije gumb >
V datoteki JS definirajte funkcijo z imenom ' spremeni barvo() ” in dobite naslov tako, da posredujete njegov ID metodi getElementById() in nato spremenite njegovo barvo:
funkcija changeColor ( ) {dokument. getElementById ( 'id' ) . stil . barva = 'rdeča' ;
}
Na koncu določite izvor datoteke JavaScript z uporabo oznake src v datoteki HTML:
< skript src = './JSfile.js' > scenarij >Iz izpisa je razvidno, da je element besedila ob kliku dodanega gumba spremenil barvo v ' rdeča ”:
Preverimo drugo metodo!
2. način: spremenite barvo besedila z uporabo lastnosti style.color z metodo querySelector().
Prav tako lahko spremenite barvo besedila z uporabo ' querySelector() ” z lastnostjo style.color. Dostopa do elementa tako z ID-jem kot z dodeljenim razredom, medtem ko metoda getElementById() samo pridobi element z dodeljenim ID-jem.
Sintaksa
Uporabite naslednjo sintakso za spreminjanje barve besedila z lastnostjo barve s pomočjo metode querySelector():
dokument. querySelector ( 'id/ime razreda' ) . stil . barva = 'barva' ;Primer
Tukaj bomo uporabili oznako za dodajanje odstavka z razredom z imenom ' barva «, ki bo pomagal pri dostopu do elementa
in gumba, ki bo poklical JavaScript » spremeni barvo() «, ko bo sprožen njen dogodek onclick:
< str razred = 'barva' > Dobrodošli v LinuxHint str >< gumb na klik = 'sprememba barve()' > Kliknite za ogled čarovnije gumb >
V definiciji ' spremeni barvo() ', bomo poklicali metodo ' querySelector() ” s podajanjem imena razreda s piko (.), ki označuje, da je do elementa dostopno na podlagi njegovega imena razreda, nato pa zanj uporabite lastnost barve:
funkcija changeColor ( ) {dokument. querySelector ( '.barva' ) . stil . barva = 'Magenta' ;
}
Če pa želite uporabiti ID v elementu HTML in dostopati do njega z metodo querySelector(), dodajte » # ” znak z id imenom:
dokument. querySelector ( '#barva' ) . stil . barva = 'Magenta' ;Izhod
Zbrali smo najenostavnejši pristop za spreminjanje barve besedila v JavaScriptu.
Zaključek
Za spreminjanje barve besedila lahko uporabite lastnost style.color s pomočjo metode getElementById() ali metode querySelector(). Metoda getElementById() se uporablja za dostop do elementa HTML na podlagi njegovega dodeljenega ID-ja, medtem ko metoda querySelector() dostopa do elementa na podlagi dodeljenega ID-ja ali razreda z navedbo znakov (#) oziroma (.). Ta študija je ponazorila preprost postopek za spreminjanje barve besedila v JavaScriptu.