Hvordan endre skrift farger med Javascript
Ved hjelp av Javascript, kan en webutvikler dynamisk endre innhold og stil attributter på en nettside. Endre fargen på en del av teksten på en side er en enkel, men effektiv måte å tiltrekke seg brukerens oppmerksomhet, for eksempel, kan du endre fargen på en etikett på et skjemafelt til rødt hvis brukeren ikke har gitt opplysninger om at han er pålagt å sende inn.
Bruksanvisning
1 I en teksteditor, åpne HTML-fil som inneholder teksten du vil endre.
2 Identifiser tekst som har fargen du ønsker å endre. Denne teksten, og bare denne tekst, må ligge i sin egen HTML-element, så som et avsnitt kode (<p>), et blokkelement (<div>) eller en innebygd element (<span>), fordi man vil gjelde fargen til dette elementet, og dette vil endre fargen på all teksten inni den.
Hvis teksten du vil endre, er allerede i sitt eget element (for eksempel <p> Endre fargen på hele dette avsnittet </ p>), og deretter gå videre til neste trinn.
Hvis du bare ønsker å endre fargen på et fragment av tekst i et element (for eksempel ordet \ "farge \" i <p> Endre fargen på noen tekst </ p>), deretter surround at fragment i en < span> tag å isolere den. For forrige eksempel, ville du ha <p> Endre <span> farge </ span> for litt tekst </ p>.
3 Tildele en identifikator til elementet som inneholder teksten du ønsker å endre ved hjelp av \ "id \" attributt. Denne identifikatoren må ikke tilhører noen andre element på siden. For eksempel:
<P> Endre <span id = \ "colorize_me \"> farge </ span> for litt tekst </ p>
4 Legg en <script> tag i dokumentets <head> elementet som skal inneholde en funksjon for å endre fargen på teksten:
<Script type = \ "text / javascript \">
funksjon changeTextColor ()
{
}
</ Script>
5 I kroppen av denne funksjonen (mellom klammeparentes), legg til følgende linje med kode:
document.getElementById (\ "colorize_me \"). style.color = \ "red \"
GÅ
Bytt ut \ "colorize_me \" med identifikatoren du tilordnet i trinn 3, og erstatte \ "rød \" med den fargen du ønsker å gjøre teksten.
Den \ "dokument \" referanse returnerer element som representerer hele HTML-dokumentet. Ringe \ "getElementById \" funksjonen returnerer element som har den angitte identifikator, og derfra kan du få tilgang til \ "style \" eiendom, som inneholder CSS (Cascading Style Sheets) egenskaper, hvorav den ene er \ "farge (se ressurser). \ "
6 Kalle denne funksjonen fra et passende sted i dokumentet. Som et eksempel, skaper følgende linje en link som vil endre tekstfarge når brukeren klikker på det:
<a href=\"javascript:void(0)\" onclick=\"changeTextColor();\"> Klikk meg </a>