Ova studija će ilustrirati metode za promjenu boje teksta u JavaScriptu.
Kako promijeniti boju teksta u JavaScriptu?
Za promjenu boje teksta u JavaScriptu koristite dolje navedene unaprijed definirane JavaScript metode:
Objasnimo ove metode pojedinačno.
Metoda 1: Promjena boje teksta pomoću svojstva style.color s metodom getElementById().
Za promjenu boje teksta, možete koristiti ' getElementById() ' metoda s ' stil.boja ” vlasništvo. U takvom scenariju, elementu teksta može se pristupiti pomoću metode getElementById(), a zatim primijeniti atribut boje uz pomoć svojstva HTML style.color.
Sintaksa
Upotrijebite zadanu sintaksu za promjenu boje teksta pomoću svojstva boje uz pomoć metode getElementById():
dokument. getElementById ( 'iskaznica' ) . stil . boja = 'boja' ;' iskaznica ” je ID elementa naveden za pristup tekstualnom elementu i zatim promjenu njegove boje pomoću svojstva style.color.
Krenite prema donjem primjeru da biste razumjeli navedeni koncept!
Primjer
Prvo ćemo stvoriti naslov pomoću označiti i dodijeliti ID ' iskaznica ” koji se koristi za pristup elementu h4, zatim kreirajte gumb koji poziva funkciju pod nazivom “ promijeniBoju() ” definirano u JavaScript(JS) datoteci kada se aktivira onclick događaj dodanog gumba:
< h4 id = 'iskaznica' > Dobrodošli u LinuxHint h4 >< tip gumba = 'dugme' na klik = 'promijeni boju()' > Kliknite da biste vidjeli čaroliju dugme >
U JS datoteci definirajte funkciju pod nazivom ' promijeniBoju() ” i dohvatite naslov prosljeđivanjem njegovog ID-a metodi getElementById(), a zatim mu promijenite boju:
funkcija changeColor ( ) {dokument. getElementById ( 'iskaznica' ) . stil . boja = 'Crvena' ;
}
Na kraju, odredite izvor JavaScript datoteke pomoću oznake src u HTML datoteci:
< skripta src = './JSfile.js' > skripta >Iz izlaza se može vidjeti da kada se klikne dodani gumb, element teksta promijenio je boju u ' Crvena ”:
Provjerimo drugu metodu!
Metoda 2: Promjena boje teksta pomoću svojstva style.color s metodom querySelector().
Također možete promijeniti boju teksta koristeći ' querySelector() ” metoda sa svojstvom style.color. Pristupa elementu i s ID-om ili s dodijeljenom klasom, dok metoda getElementById() samo dohvaća element s dodijeljenim ID-om.
Sintaksa
Upotrijebite sljedeću sintaksu za promjenu boje teksta pomoću svojstva boje uz pomoć metode querySelector():
dokument. querySelector ( 'id/naziv klase' ) . stil . boja = 'boja' ;Primjer
Ovdje ćemo koristiti oznaka za dodavanje odlomka s klasom pod nazivom ' boja “, koji će pomoći pristupiti elementu
i gumbu koji će pozvati JavaScript “ promijeniBoju() ” kada će se pokrenuti njegov događaj onclick:
< str razreda = 'boja' > Dobrodošli u LinuxHint str >< gumb na klik = 'promijeni boju()' > Kliknite da biste vidjeli čaroliju dugme >
U definiciji ' promijeniBoju() ', pozvat ćemo metodu ' querySelector() ” prosljeđivanjem naziva klase s točkom(.) koja označava da se elementu pristupa na temelju naziva njegove klase, a zatim na njega primijenite svojstvo boje:
funkcija changeColor ( ) {dokument. querySelector ( '.boja' ) . stil . boja = 'magenta' ;
}
Međutim, da biste koristili ID u HTML elementu i pristupili mu metodom querySelector(), dodajte ' # ” znak s ID imenom:
dokument. querySelector ( '#boja' ) . stil . boja = 'magenta' ;Izlaz
Sakupili smo najjednostavniji pristup za promjenu boje teksta u JavaScriptu.
Zaključak
Za promjenu boje teksta možete koristiti svojstvo style.color uz pomoć metode getElementById() ili metode querySelector(). Metoda getElementById() koristi se za pristup HTML elementu na temelju njegovog dodijeljenog ID-a, dok metoda querySelector() pristupa elementu na temelju dodijeljenog ID-a ili klase određivanjem znakova (#) odnosno (.). Ova je studija ilustrirala jednostavnu proceduru za promjenu boje teksta u JavaScriptu.