Denne studien vil illustrere metodene for å endre fargen på teksten i JavaScript.
Hvordan endre tekstfarge i JavaScript?
For å endre tekstfargen i JavaScript, bruk de forhåndsdefinerte JavaScript-metodene nedenfor:
- style.color-egenskapen med getElementById()-metoden
- style.color-egenskapen med querySelector()-metoden
La oss forklare disse metodene individuelt.
Metode 1: Endre tekstfarge ved å bruke style.color-egenskapen med getElementById()-metoden
For å endre fargen på teksten, kan du bruke ' getElementById() '-metoden med ' stil.farge ' eiendom. I et slikt scenario kan tekstelementet nås ved å bruke getElementById()-metoden og deretter bruke fargeattributtet ved hjelp av HTML style.color-egenskapen.
Syntaks
Bruk den gitte syntaksen for å endre tekstfarge ved å bruke fargeegenskapen ved hjelp av getElementById()-metoden:
dokument. getElementById ( 'id' ) . stil . farge = 'farge' ;« id ” er elementets ID spesifisert for å få tilgang til tekstelementet og deretter endre fargen ved å bruke style.color-egenskapen.
Gå mot eksemplet nedenfor for å forstå det angitte konseptet!
Eksempel
Først skal vi lage en overskrift ved hjelp av tag og tilordne en id ' id ' som brukes for å få tilgang til h4-elementet, og lag deretter en knapp som påkaller en funksjon kalt ' changeColor() ' definert i en JavaScript(JS)-fil når onclick-hendelsen til den lagte knappen utløses:
< h4 id = 'id' > Velkommen til LinuxHint h4 >< knappetype = 'knapp' ved trykk = 'changeColor()' > Klikk for å se magien knapp >
I JS-filen, definer en funksjon kalt ' changeColor() ” og få overskriften ved å sende id-en til getElementById()-metoden og deretter endre fargen:
funksjon endre farge ( ) {dokument. getElementById ( 'id' ) . stil . farge = 'rød' ;
}
Til slutt spesifiser kilden til JavaScript-filen ved å bruke src-taggen i HTML-filen:
< script src = './JSfile.js' > manus >Det kan sees fra utdataene at når den tilføyde knappen klikkes, endret tekstelementet fargen til ' rød ':
La oss sjekke ut den andre metoden!
Metode 2: Endre tekstfarge ved å bruke style.color-egenskapen med querySelector()-metoden
Du kan også endre fargen på teksten ved å bruke ' querySelector() ” metode med style.color-egenskapen. Den får tilgang til elementet med både id eller den tilordnede klassen mens getElementById()-metoden bare henter elementet med den tildelte id.
Syntaks
Bruk følgende syntaks for å endre tekstfargen ved hjelp av fargeegenskapen ved hjelp av querySelector()-metoden:
dokument. querySelector ( 'id/klassenavn' ) . stil . farge = 'farge' ;Eksempel
Her vil vi bruke tag for å legge til et avsnitt med klassen kalt ' farge ', som vil hjelpe deg med å få tilgang til
-elementet og en knapp som kaller JavaScript ' changeColor() ”-metoden når onclick-hendelsen vil bli utløst:
< s klasse = 'farge' > Velkommen til LinuxHint s >< knappen ved å klikke = 'changeColor()' > Klikk for å se magien knapp >
I definisjonen av ' changeColor() '-metoden, vil vi påkalle ' querySelector() ”-metoden ved å sende klassenavn med dot(.) som indikerer at elementet er tilgjengelig basert på klassenavnet, og deretter bruke fargeegenskap på det:
funksjon endre farge ( ) {dokument. querySelector ( '.farge' ) . stil . farge = 'Magenta' ;
}
For å bruke en id i et HTML-element og få tilgang til den ved å bruke querySelector()-metoden, legg til ' # ' skilt med id navn:
dokument. querySelector ( '#farge' ) . stil . farge = 'Magenta' ;Produksjon
Vi har samlet den enkleste tilnærmingen for å endre tekstfargen i JavaScript.
Konklusjon
For å endre tekstfarge kan du bruke style.color-egenskapen ved hjelp av getElementById()-metoden eller querySelector()-metoden. GetElementById()-metoden brukes for å få tilgang til HTML-elementet basert på dets tilordnede id, mens querySelector()-metoden får tilgang til elementet basert på den tilordnede IDen eller klassen ved å spesifisere henholdsvis (#) eller (.) tegn. Denne studien illustrerte den enkle prosedyren for å endre tekstfargen i JavaScript.