Sådan ændres Font farver med Javascript

July 6

Sådan ændres Font farver med Javascript


Ved hjælp af JavaScript, kan en web-udvikler dynamisk ændre indhold og stil attributter på en webside. Ændring af farven på et stykke tekst på en side er en enkel, men effektiv måde at tiltrække brugerens opmærksomhed-for eksempel, kan du ændre farven på en etiket på et formularfelt til rød, hvis brugeren ikke har givet oplysninger, at han er forpligtet til at indsende.

Instruktioner

1 I dit foretrukne teksteditor Åbn HTML-fil, der indeholder den tekst, du vil ændre.

2 Identificer teksten hvis farve du vil ændre. Denne tekst, og kun denne tekst, skal være indeholdt i sin egen HTML-element, såsom et afsnit tag (<p>), en blok element (<div>) eller et inline element (<span>), fordi du vil anvende den farve til dette element, og dette vil ændre farven på hele teksten i den.

Hvis den tekst, du vil ændre, er allerede i sin egen element (fx <p> Ændre farven på hele dette stykke </ p>), så gå videre til næste trin.

Hvis du kun ønsker at ændre farven på et fragment af tekst i et element (fx ordet \ "farve \" i <p> ​​Ændre farven på noget tekst </ p>), så omgiver dette fragment i en < span> tag for at isolere den. For det foregående eksempel, ville du have <p> Skift <span> farve </ span> af noget tekst </ p>.

3 Tildel en identifikator til element, der indeholder den tekst, du vil ændre, ved at bruge \ "id \" attribut. Denne identifikator må ikke tilhøre noget andet element på siden. For eksempel:

<P> Skift <span id = \ "colorize_me \"> farve </ span> af noget tekst </ p>

4 Tilføj et <script> tag i dit dokuments <head> element, der vil indeholde en funktion til at ændre farven på teksten:

<Script type = \ "text / javascript \">
funktion changeTextColor ()
{
}
</ Script>

5 I kroppen af ​​denne funktion (mellem de krøllede parenteser), tilføje følgende linje kode:

document.getElementById (\ "colorize_me \"). style.color = \ "red \"

Erstat \ "colorize_me \" med identifikationen du tildelte i trin 3, og erstatte \ "red \" med den farve, du ønsker at gøre teksten.

Den \ "dokument \" reference returnerer element, der repræsenterer hele HTML-dokument. Kalder \ "getElementById \" -funktionen giver element, der har den angivne id, og derfra kan du få adgang til \ "stil \" ejendom, som indeholder CSS (Cascading Style Sheets) egenskaber, hvoraf den ene er \ "farve (se Ressourcer). \ "

6 Kald denne funktion fra et passende sted i dokumentet. Som et eksempel, den følgende linje skaber en forbindelse, der vil ændre tekstfarven, når brugeren klikker på det:

<a href=\"javascript:void(0)\" onclick=\"changeTextColor();\"> Klik mig </a>


relaterede artikler