Hvordan endre tekstfarge i JavaScript

JavaScript er et dynamisk språk som gir forskjellige programmeringsalternativer for å utføre flere oppgaver. For eksempel er det å endre et elements farge en av de hyppigste oppgavene mens du utvikler et nettsted. For å gjøre det, først, få henvisning til HTML -elementet du vil endre fargen, og deretter tilordne den fargeverdien i JavaScript -stil fargeattributt.

Denne studien vil illustrere metodene for å endre fargen på teksten i JavaScript.

Hvordan endre tekstfarge i JavaScript?

For å endre tekstfargen i JavaScript, bruk de nedenfor-nevnte forhåndsdefinerte JavaScript-metodene:

• stil.fargeegenskap med getElementById () -metode
• stil.Fargeegenskaper med QuerySelector () -metode

La oss forklare disse metodene individuelt.

Metode 1: Endre tekstfarge ved hjelp av stil.fargeegenskap med getElementById () -metode

For å endre fargen på teksten, kan du bruke "getElementById ()”Metode med“stil.farge”Eiendom. I et slikt scenario kan du få tilgang til tekstelement.fargeegenskap.

Syntaks

Bruk den gitte syntaks for å endre tekstfarge ved å bruke fargeegenskaper 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 stilen.fargeegenskap.

Gå mot eksemplet nedenfor for å forstå det uttalte konseptet!

Eksempel

Først vil vi lage en overskrift ved hjelp av

tagg og tilordne en ID “id”Som brukes til å få tilgang til H4 -elementet, oppretter deretter en knapp som påkaller en funksjon som heter“ChangeColor ()”Definert i en JavaScript (JS) -fil når OnClick -hendelsen til den ekstra knappen blir utløst:

Velkommen til Linuxhint

Klikk for å se magien

I JS -fil, definer en funksjon som heter “ChangeColor ()”Og få overskriften ved å sende sin ID til getElementById () -metoden og deretter endre fargen:

funksjon ChangeColor ()
dokument.getElementById ("Id").stil.farge = "rød";

Til slutt, spesifiser kilden til JavaScript -filen ved å bruke SRC -taggen i HTML -filen:

Det kan sees fra utdataene at når den ekstra knappen er klikket, endret tekstelementet fargen til "rød”:

La oss sjekke ut den andre metoden!

Metode 2: Endre tekstfarge ved hjelp av stil.Fargeegenskaper med QuerySelector () -metode

Du kan også endre fargen på teksten ved å bruke "QuerySelector ()”Metode med stil.fargeegenskap. Den får tilgang til elementet med både ID eller den tildelte klassen mens getElementById () -metoden bare henter elementet med sin tildelte ID.

Syntaks

Bruk følgende syntaks for å endre tekstfargen ved hjelp av fargeegenskaper ved hjelp av QuerySelector () -metoden:

dokument.QuerySelector ("ID/ClassName").stil.farge = "farge";

Eksempel

Her vil vi bruke

Tag for å legge til et avsnitt med klassen som heter “farge”, Det vil bidra til å få tilgang til

element og en knapp som vil kalle JavaScript “ChangeColor ()”Metode når dens onClick -hendelsen blir utløst:

Velkommen til Linuxhint

Klikk for å se magien

I definisjonen av “ChangeColor ()”Metode, vi vil påkalle“QuerySelector ()”Metode ved å passere klassenavn med DOT (.) som indikerer at elementet er tilgjengelig basert på klassenavnet, og deretter bruke fargeegenskaper på det:

funksjon ChangeColor ()
dokument.QuerySelector (".farge").stil.farge = "magenta";

For å bruke en ID i et HTML -element og få tilgang til den ved hjelp av QuerySelector () -metoden, kan du imidlertid legge 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 stilen.Fargeegenskaper ved hjelp av GetElementById () -metode eller spørring () -metode. GetElementById () -metoden brukes til å få tilgang til HTML -elementet basert på dets tildelte ID, mens QuerySelector () -metoden får tilgang til elementet basert på den tildelte ID eller klassen ved å spesifisere (#) eller (.) Skilt, henholdsvis. Denne studien illustrerte den enkle prosedyren for å endre tekstfargen i JavaScript.