Šis pētījums ilustrēs metodes, kā mainīt teksta krāsu JavaScript.
Kā mainīt teksta krāsu JavaScript?
Lai mainītu teksta krāsu JavaScript, izmantojiet tālāk minētās iepriekš definētās JavaScript metodes:
Paskaidrosim šīs metodes atsevišķi.
1. metode: mainiet teksta krāsu, izmantojot rekvizītu style.color ar metodi getElementById()
Lai mainītu teksta krāsu, varat izmantot ' getElementById() ' metode ar ' stils.krāsa ” īpašums. Šādā gadījumā teksta elementam var piekļūt, izmantojot metodi getElementById() un pēc tam lietot atribūtu color, izmantojot HTML rekvizītu style.color.
Sintakse
Izmantojiet doto sintaksi teksta krāsas maiņai, izmantojot krāsu rekvizītu ar metodes getElementById() palīdzību:
dokumentu. getElementById ( 'id' ) . stils . krāsa = 'krāsa' ;' id ” ir elementa ID, kas norādīts, lai piekļūtu teksta elementam un pēc tam mainītu tā krāsu, izmantojot rekvizītu style.color.
Dodieties uz tālāk redzamo piemēru, lai saprastu norādīto jēdzienu!
Piemērs
Pirmkārt, mēs izveidosim virsrakstu, izmantojot atzīmējiet un piešķiriet ID ' id ', kas tiek izmantots, lai piekļūtu elementam h4, pēc tam izveidojiet pogu, kas izsauc funkciju ar nosaukumu ' mainīt krāsu () ” definēts JavaScript (JS) failā, kad tiek aktivizēts pievienotās pogas onclick notikums:
< h4 id = 'id' > Laipni lūdzam LinuxHint h4 >< pogas veids = 'poga' onclick = 'mainīt krāsu()' > Noklikšķiniet, lai redzētu maģiju pogu >
JS failā definējiet funkciju ar nosaukumu ' mainīt krāsu () ” un iegūstiet virsrakstu, nosūtot tā ID metodei getElementById() un pēc tam mainiet tā krāsu:
funkciju maiņaKrāsa ( ) {dokumentu. getElementById ( 'id' ) . stils . krāsa = 'sarkans' ;
}
Visbeidzot, norādiet JavaScript faila avotu, izmantojot src tagu HTML failā:
< skripts src = './JSfile.js' > skripts >No izvades var redzēt, ka, noklikšķinot uz pievienotās pogas, teksta elements mainīja krāsu uz “ sarkans ”:
Apskatīsim otru metodi!
2. metode: mainiet teksta krāsu, izmantojot rekvizītu style.color ar querySelector() metodi
Varat arī mainīt teksta krāsu, izmantojot ' querySelector() ” metode ar īpašību style.color. Tā piekļūst elementam gan ar id, gan ar piešķirto klasi, savukārt metode getElementById() tikai ienes elementu ar tam piešķirto ID.
Sintakse
Izmantojiet šādu sintaksi, lai mainītu teksta krāsu, izmantojot krāsu rekvizītu ar querySelector() metodes palīdzību:
dokumentu. querySelector ( 'id/className' ) . stils . krāsa = 'krāsa' ;Piemērs
Šeit mēs izmantosim tagu, lai pievienotu rindkopu ar klasi ar nosaukumu ' krāsa ”, kas palīdzēs piekļūt elementam
un pogai, kas izsauks JavaScript “ mainīt krāsu () ” metode, kad tiks aktivizēts notikums onclick:
< lpp klasē = 'krāsa' > Laipni lūdzam LinuxHint lpp >< pogu onclick = 'mainīt krāsu()' > Noklikšķiniet, lai redzētu maģiju pogu >
“ mainīt krāsu () ' metodi, mēs izsauksim ' querySelector() ” metodi, nododot klases nosaukumu ar punktu (.), kas norāda, ka elementam tiek piekļūts, pamatojoties uz tā klases nosaukumu, un pēc tam piemērojot tam krāsu rekvizītu:
funkciju maiņaKrāsa ( ) {dokumentu. querySelector ( '.color' ) . stils . krāsa = 'Magenta' ;
}
Tomēr, lai izmantotu ID HTML elementā un piekļūtu tam, izmantojot querySelector() metodi, pievienojiet ' # ” zīme ar ID nosaukumu:
dokumentu. querySelector ( '#krāsa' ) . stils . krāsa = 'Magenta' ;Izvade
Mēs esam apkopojuši vienkāršāko pieeju teksta krāsas maiņai JavaScript.
Secinājums
Lai mainītu teksta krāsu, varat izmantot rekvizītu style.color, izmantojot metodi getElementById() vai querySelector(). Metode getElementById() tiek izmantota, lai piekļūtu HTML elementam, pamatojoties uz tā piešķirto ID, savukārt metode querySelector() piekļūst elementam, pamatojoties uz piešķirto ID vai klasi, attiecīgi norādot (#) vai (.) zīmi. Šis pētījums ilustrē vienkāršu procedūru teksta krāsas maiņai JavaScript.