Kaip pakeisti teksto spalvą „JavaScript“.

Kaip Pakeisti Teksto Spalva Javascript



„JavaScript“ yra dinamiška kalba, teikianti įvairias programavimo parinktis kelioms užduotims atlikti. Pavyzdžiui, elemento spalvos keitimas yra viena iš dažniausiai atliekamų užduočių kuriant svetainę. Norėdami tai padaryti, pirmiausia gaukite nuorodą į HTML elementą, kurio spalvą norite pakeisti, tada priskirkite jam spalvos reikšmę JavaScript stiliaus spalvos atribute.

Š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:







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ą.