Šis tyrimas parodys metodus, kaip pakeisti teksto spalvą JavaScript.
Kaip pakeisti teksto spalvą „JavaScript“?
Jei norite pakeisti „JavaScript“ teksto spalvą, naudokite toliau nurodytus iš anksto nustatytus „JavaScript“ metodus:
- style.color nuosavybė naudojant getElementById() metodą
- style.color nuosavybė su querySelector() metodu
Paaiškinkime šiuos metodus atskirai.
1 būdas: pakeiskite teksto spalvą naudodami style.color ypatybę su getElementById() metodu
Norėdami pakeisti teksto spalvą, galite naudoti ' getElementById() “ metodas su „ stilius.spalva ' nuosavybė. Tokiu atveju teksto elementą galima pasiekti naudojant getElementById() metodą ir tada pritaikyti spalvos atributą naudojant HTML style.color ypatybę.
Sintaksė
Norėdami pakeisti teksto spalvą, naudokite pateiktą sintaksę, naudodami spalvos ypatybę naudodami getElementById() metodą:
dokumentas. getElementById ( 'id' ) . stilius . spalva = 'spalva' ;„ id “ yra elemento ID, nurodytas norint pasiekti teksto elementą ir pakeisti jo spalvą naudojant style.color ypatybę.
Eikite į toliau pateiktą pavyzdį, kad suprastumėte pateiktą koncepciją!
Pavyzdys
Pirmiausia sukursime antraštę naudodami pažymėkite ir priskirkite ID ' id “, kuris naudojamas norint pasiekti elementą h4, tada sukurkite mygtuką, kuris iškviečia funkciją pavadinimu „ pakeisti spalvą () “, apibrėžtas „JavaScript“ (JS) faile, kai suaktyvinamas pridėto mygtuko „onclick“ įvykis:
< h4 id = 'id' > Sveiki atvykę į „LinuxHint“. h4 >< mygtuko tipas = 'mygtukas' paspaudus = 'pakeisti spalvą ()' > Spustelėkite, kad pamatytumėte magiją mygtuką >
JS faile apibrėžkite funkciją pavadinimu ' pakeisti spalvą () “ ir gaukite antraštę perduodami jos ID metodui getElementById() ir pakeiskite jos spalvą:
funkcija pakeisti Spalvą ( ) {dokumentas. getElementById ( 'id' ) . stilius . spalva = 'raudona' ;
}
Galiausiai nurodykite „JavaScript“ failo šaltinį naudodami src žymą HTML faile:
< scenarijus src = './JSfile.js' > scenarijus >Iš išvesties matyti, kad paspaudus pridėtą mygtuką, teksto elementas pakeitė spalvą į ' raudona “:
Pažiūrėkime kitą būdą!
2 būdas: pakeiskite teksto spalvą naudodami style.color ypatybę su querySelector() metodu
Taip pat galite pakeisti teksto spalvą naudodami ' querySelector() ” metodas su style.color savybe. Jis pasiekia elementą su ID arba priskirta klase, o metodas getElementById() tiesiog paima elementą su jam priskirtu ID.
Sintaksė
Naudokite šią sintaksę, kad pakeistumėte teksto spalvą naudodami spalvos ypatybę naudodami querySelector() metodą:
dokumentas. querySelector ( 'id/className' ) . stilius . spalva = 'spalva' ;Pavyzdys
Čia mes naudosime žyma, kad pridėtumėte pastraipą su klase pavadinimu ' spalva “, kuris padės pasiekti
elementą ir mygtuką, kuris iškvies „JavaScript“ pakeisti spalvą () “ metodas, kai bus suaktyvintas įvykis onclick:
< p klasė = 'spalva' > Sveiki atvykę į „LinuxHint“. p >< mygtukas onclick = 'pakeisti spalvą ()' > Spustelėkite, kad pamatytumėte magiją mygtuką >
Apibrėžime „ pakeisti spalvą () “ metodą, mes iškviesime „ querySelector() “ metodą perduodant klasės pavadinimą su tašku (.), kuris rodo, kad elementas pasiekiamas pagal jo klasės pavadinimą, ir tada pritaikyti jam spalvos ypatybę:
funkcija pakeisti Spalvą ( ) {dokumentas. querySelector ( '.spalva' ) . stilius . spalva = 'Rausvai raudona' ;
}
Tačiau norėdami naudoti ID HTML elemente ir pasiekti jį naudodami querySelector() metodą, pridėkite „ # “ ženklas su ID pavadinimu:
dokumentas. querySelector ( '#spalva' ) . stilius . spalva = 'Rausvai raudona' ;Išvestis
Mes surinkome paprasčiausią būdą pakeisti teksto spalvą „JavaScript“.
Išvada
Norėdami pakeisti teksto spalvą, galite naudoti ypatybę style.color, naudodami metodą getElementById() arba metodą querySelector(). Metodas getElementById() naudojamas pasiekti HTML elementą pagal jam priskirtą ID, o metodas querySelector() pasiekia elementą pagal priskirtą ID arba klasę, atitinkamai nurodydamas (#) arba (.) ženklus. Šis tyrimas iliustravo paprastą teksto spalvos keitimo JavaScript programoje procedūrą.