Denne undersøgelse vil illustrere metoderne til at ændre farven på teksten i JavaScript.
Hvordan ændrer man tekstfarve i JavaScript?
For at ændre tekstfarven i JavaScript skal du bruge nedenstående foruddefinerede JavaScript-metoder:
Lad os forklare disse metoder individuelt.
Metode 1: Skift tekstfarve ved hjælp af style.color-egenskaben med getElementById()-metoden
For at ændre farven på teksten kan du bruge ' getElementById() ' metode med ' stil.farve ” ejendom. I et sådant scenarie kan tekstelementet tilgås ved hjælp af metoden getElementById() og derefter anvende farveattributten ved hjælp af HTML style.color-egenskaben.
Syntaks
Brug den givne syntaks til at ændre tekstfarve ved at bruge farveegenskab ved hjælp af getElementById() metoden:
dokument. getElementById ( 'id' ) . stil . farve = 'farve' ;Det ' id ” er elementets id angivet for at få adgang til tekstelementet og derefter ændre dets farve ved hjælp af egenskaben style.color.
Gå mod nedenstående eksempel for at forstå det angivne koncept!
Eksempel
Først vil vi oprette en overskrift vha tag og tildel et id ' id ', der bruges til at få adgang til h4-elementet, og opret derefter en knap, der kalder en funktion med navnet ' changeColor() ” defineret i en JavaScript(JS)-fil, når onclick-hændelsen for den tilføjede knap udløses:
< h4 id = 'id' > Velkommen til LinuxHint h4 >< knaptype = 'knap' onclick = 'changeColor()' > Klik for at se magien knap >
I JS-fil skal du definere en funktion med navnet ' changeColor() ” og få overskriften ved at overføre dens id til getElementById() metoden og derefter ændre dens farve:
funktion changeColor ( ) {dokument. getElementById ( 'id' ) . stil . farve = 'rød' ;
}
Til sidst skal du angive kilden til JavaScript-filen ved hjælp af src-tagget i HTML-filen:
< script src = './JSfile.js' > manuskript >Det kan ses på outputtet, at når der klikkes på den tilføjede knap, ændrede tekstelementet farve til ' rød ”:
Lad os se den anden metode!
Metode 2: Skift tekstfarve ved hjælp af style.color-egenskaben med querySelector() Method
Du kan også ændre farven på teksten ved at bruge ' querySelector() ” metode med egenskaben style.color. Den får adgang til elementet med både id eller den tildelte klasse, mens metoden getElementById() bare henter elementet med dets tildelte id.
Syntaks
Brug følgende syntaks til at ændre tekstfarven ved hjælp af farveegenskaben ved hjælp af querySelector() metoden:
dokument. querySelector ( 'id/klassenavn' ) . stil . farve = 'farve' ;Eksempel
Her vil vi bruge tag for at tilføje et afsnit med klassen med navnet ' farve ”, som vil hjælpe med at få adgang til
-elementet og en knap, der kalder JavaScriptet “ changeColor() ”-metoden, når dens onclick-hændelse vil blive udløst:
< s klasse = 'farve' > Velkommen til LinuxHint s >< knap ved klik = 'changeColor()' > Klik for at se magien knap >
I definitionen af ' changeColor() '-metoden, vil vi påberåbe os ' querySelector() ” metode ved at overføre klassenavn med dot(.), der angiver, at elementet er tilgået baseret på dets klassenavn, og derefter anvende farveegenskab på det:
funktion changeColor ( ) {dokument. querySelector ( '.farve' ) . stil . farve = 'Magenta' ;
}
Men for at bruge et id i et HTML-element og få adgang til det ved hjælp af querySelector()-metoden, skal du tilføje ' # ' tegn med id navn:
dokument. querySelector ( '#farve' ) . stil . farve = 'Magenta' ;Produktion
Vi har samlet den enkleste tilgang til at ændre tekstfarven i JavaScript.
Konklusion
For at ændre tekstfarve kan du bruge egenskaben style.color ved hjælp af getElementById()-metoden eller querySelector()-metoden. GetElementById()-metoden bruges til at få adgang til HTML-elementet baseret på dets tildelte id, mens querySelector()-metoden får adgang til elementet baseret på det tildelte id eller klassen ved at angive henholdsvis (#) eller (.) tegn. Denne undersøgelse illustrerede den enkle procedure til at ændre tekstfarven i JavaScript.