Hvordan identifisere Tekst Font farge med Javascript

Hvordan identifisere Tekst Font farge med Javascript


En webside kan bruke Javascript til å samhandle med besøkende samt oppdage informasjon om siden. For eksempel kan en webutvikler lage en Javascript-funksjon som får bredde egenskapene til alle tekstbokser. Farge er en annen viktig websiden eiendom. Nettstedet kan inneholde tekstelementer som inneholder en rekke farger. Hvis koden må oppdage teksten skriftfargen på en bestemt side element, kan du bruke Javascript for å identifisere denne verdien.

Bruksanvisning

1 Åpne HTML-dokumentet med Notepad eller en HTML-editor. Legg til følgende kode i <body> -delen av dokumentet:

<P id = "PARAGRAPH1" class = "red"> Dette er en rød avsnitt </ p>

<Input type = "button" onclick = "showTextColor ()" value = "Vis Tekstfarge" />

Dette skaper et avsnitt og en knapp. Paragrafen refererer til en CSS-klasse som heter "red." Når du klikker på knappen, vil det kaller "showTextColor" funksjon som beregner for avsnittet tekstfarge.

2 Legg denne koden i <head> -delen av dokumentet:

<Style type = "text / css">

.red {color: Red}

</ Style>

Dette definerer "rød" klasse. Dette avsnittet vil være rød fordi den "farge" tilhører denne klassen er rød.

3 Legg denne Javascript-kode i <head> -delen av dokumentet:

<Script type = "text / javascript">

funksjon showTextColor () {

// Lines 1-3

Var avsnitt = document.getElementById ( "PARAGRAPH1");

Var textcolor;

// Lines 4-5

if (paragraph.currentStyle)

textcolor = paragraph.currentStyle.color;

// Lines 6-7

else if (window.getComputedStyle)

textcolor = document.defaultView.getComputedStyle (ledd null) .getPropertyValue ( "farge");

alert ( "Tekst farge er" + textcolor);

}

</ Script>

Linje man får en henvisning til punkt og lagrer den i "ledd." Linje to definerer en variabel som vil holde tekstfarge. Linje fire bruker "currentStyle" eiendom for å få tekstfarge om nettleseren støtter denne egenskapen. Seks bruker "document.defaultView.getComputedStyle" metode for å få tekstfarge om nettleseren støtter denne metoden. Ulike nettlesere støtter ulike metoder.

4 Lagre filen og åpne Windows Utforsker. Finn filen og dobbeltklikk på den for å vise den i nettleseren din.

5 Klikk på knappen. Javascript-funksjonen vil utføre og vise fargen på teksten i en meldingsboks.

Hint

  • Hvis du bruker Firefox, vil meldingsboksen lese, "Tekstfarge er rgb (255, 0, 0)." Dette skjer fordi Firefox viser farge ved hjelp av RGB-systemet. I RGB, er rød "255, 0, 0" (se Ressurser).