Ang pag-aaral na ito ay maglalarawan ng mga pamamaraan para sa pagbabago ng kulay ng teksto sa JavaScript.
Paano Baguhin ang Kulay ng Teksto sa JavaScript?
Para sa pagbabago ng kulay ng teksto sa JavaScript, gamitin ang nabanggit sa ibaba na paunang-natukoy na mga pamamaraan ng JavaScript:
- style.color property na may getElementById() method
- style.color property na may querySelector() method
Ipaliwanag natin ang mga pamamaraang ito nang paisa-isa.
Paraan 1: Baguhin ang Kulay ng Teksto Gamit ang style.color property na may getElementById() Method
Upang baguhin ang kulay ng teksto, maaari mong gamitin ang “ getElementById() 'paraan na may ' istilo.kulay ” ari-arian. Sa ganoong sitwasyon, maaaring ma-access ang elemento ng text gamit ang getElementById() na paraan at pagkatapos ay ilapat ang katangian ng kulay sa tulong ng HTML style.color property.
Syntax
Gamitin ang ibinigay na syntax para sa pagbabago ng kulay ng teksto sa pamamagitan ng paggamit ng color property sa tulong ng getElementById() method:
dokumento. getElementById ( 'id' ) . istilo . kulay = 'kulay' ;Ang ' id ” ay ang id ng elemento na tinukoy upang ma-access ang elemento ng teksto at pagkatapos ay baguhin ang kulay nito gamit ang style.color property.
Tumungo sa halimbawa sa ibaba upang maunawaan ang nakasaad na konsepto!
Halimbawa
Una, gagawa tayo ng heading gamit ang tag at magtalaga ng id ' id ” na ginagamit upang ma-access ang elemento ng h4, pagkatapos, lumikha ng isang pindutan na humihiling ng isang function na pinangalanang ' pagbabago ng kulay() ” na tinukoy sa isang JavaScript(JS) file kapag ang onclick na kaganapan ng idinagdag na button ay na-trigger:
< h4 id = 'id' > Maligayang pagdating sa LinuxHint h4 >< uri ng pindutan = 'button' onclick = 'pagbabago ng kulay()' > I-click para Makita ang Magic pindutan >
Sa JS file, tukuyin ang isang function na pinangalanang ' pagbabago ng kulay() ” at kunin ang heading sa pamamagitan ng pagpasa ng id nito sa getElementById() na pamamaraan at pagkatapos ay baguhin ang kulay nito:
function changeColor ( ) {dokumento. getElementById ( 'id' ) . istilo . kulay = 'pula' ;
}
Panghuli, tukuyin ang pinagmulan ng JavaScript file gamit ang src tag sa HTML file:
< script src = './JSfile.js' > iskrip >Makikita mula sa output na kapag ang idinagdag na pindutan ay na-click, ang elemento ng teksto ay nagbago ng kulay nito sa ' pula ”:
Tingnan natin ang ibang paraan!
Paraan 2: Baguhin ang Kulay ng Teksto Gamit ang style.color property na may querySelector() Method
Maaari mo ring baguhin ang kulay ng teksto gamit ang “ querySelector() ” paraan na may istilo.kulay na katangian. Ina-access nito ang elemento na may parehong id o ang nakatalagang klase habang ang getElementById() na paraan ay kinukuha lang ang elemento kasama ang nakatalagang id nito.
Syntax
Gamitin ang sumusunod na syntax para baguhin ang kulay ng text gamit ang color property sa tulong ng querySelector() method:
dokumento. querySelector ( 'id/className' ) . istilo . kulay = 'kulay' ;Halimbawa
Dito, gagamitin natin ang tag upang magdagdag ng isang talata na may klase na pinangalanang ' kulay ”, na makakatulong upang ma-access ang
na elemento at isang button na tatawag sa JavaScript na “ pagbabago ng kulay() ” paraan kung kailan ma-trigger ang onclick event nito:
< p klase = 'kulay' > Maligayang pagdating sa LinuxHint p >< button sa pag-click = 'pagbabago ng kulay()' > I-click para Makita ang Magic pindutan >
Sa kahulugan ng ' pagbabago ng kulay() 'paraan, tatawagin namin ang ' querySelector() ” na paraan sa pamamagitan ng pagpasa ng pangalan ng klase na may tuldok(.) na nagpapahiwatig na ang elemento ay na-access batay sa pangalan ng klase nito, at pagkatapos ay ilapat ang katangian ng kulay dito:
function changeColor ( ) {dokumento. querySelector ( '.kulay' ) . istilo . kulay = 'Magenta' ;
}
Gayunpaman, para gumamit ng id sa isang HTML na elemento at ma-access ito gamit ang querySelector() method, idagdag ang “ # ” sign na may id name:
dokumento. querySelector ( '#kulay' ) . istilo . kulay = 'Magenta' ;Output
Nakuha namin ang pinakasimpleng diskarte upang baguhin ang kulay ng teksto sa JavaScript.
Konklusyon
Para sa pagpapalit ng kulay ng text, maaari mong gamitin ang style.color property sa tulong ng getElementById() method o querySelector() method. Ang getElementById() method ay ginagamit upang ma-access ang HTML element batay sa nakatalagang id nito, habang ang querySelector() method ay ina-access ang element batay sa nakatalagang id o ang klase sa pamamagitan ng pagtukoy ng (#) o (.) na mga sign, ayon sa pagkakabanggit. Ang pag-aaral na ito ay naglalarawan ng simpleng pamamaraan para sa pagbabago ng kulay ng teksto sa JavaScript.