Come identificare il testo Colore carattere con JavaScript

June 5

Come identificare il testo Colore carattere con JavaScript


Una pagina Web può utilizzare JavaScript per interagire con i visitatori del sito e scoprire informazioni sulla pagina. Ad esempio, uno sviluppatore Web può creare una funzione JavaScript che ottiene le proprietà larghezza di tutte le caselle di testo. Il colore è un'altra importante proprietà della pagina Web. Il tuo sito può contenere elementi di testo che contengono una varietà di colori. Se il codice ha bisogno di scoprire il colore del carattere del testo di un particolare elemento di pagina, è possibile utilizzare JavaScript per identificare quel valore.

istruzione

1 Aprire il documento HTML utilizzando il blocco note o un editor HTML. Aggiungere il seguente codice alla sezione <body> del documento:

<P id = "paragrafo 1" class = "red"> Questo è un paragrafo rossa </ p>

<Input type = "button" onclick = "showTextColor ()" value = "Mostra il testo di colore" />

Questo crea un paragrafo e un pulsante. Il paragrafo si riferisce ad una classe CSS chiamato "rosso". Quando si fa clic sul pulsante, si chiamerà la funzione "showTextColor" che calcola il colore del testo del paragrafo.

2 Aggiungere questo codice alla sezione <head> del documento:

<Style type = "text / css">

.red {color: red}

</ Style>

Questo definisce la classe "rosso". Questo paragrafo sarà rosso, perché la proprietà "colore" di questa classe è di colore rosso.

3 Aggiungere questo codice JavaScript alla sezione <head> del documento:

<Script type = "text / javascript">

Funzione showTextColor () {

// Linee 1-3

var paragrafo = document.getElementById ( "paragrafo 1");

var textColor;

// Linee 4-5

if (paragraph.currentStyle)

textColor = paragraph.currentStyle.color;

// Linee 6-7

else if (window.getComputedStyle)

textColor = document.defaultView.getComputedStyle (punto, null) .getPropertyValue ( "colore");

alert ( "il colore del testo è" + textColor);

}

</ Script>

Linea si ottiene un riferimento al paragrafo e lo memorizza in "paragrafo". Linea due definisce una variabile che conterrà il colore del testo. Linea quattro utilizza la proprietà "currentStyle" per ottenere il colore del testo, se il browser supporta tale proprietà. Linea sei utilizza il metodo "document.defaultView.getComputedStyle" per ottenere il colore del testo, se il browser supporta tale metodo. Diversi browser supportano metodi diversi.

4 Salvare il file e aprire Esplora risorse. Individuare il file e fare doppio clic su di esso per visualizzare nel browser.

5 Fare clic sul pulsante. La funzione JavaScript eseguirà e visualizzare il colore del testo in una finestra di messaggio.

Consigli e avvertenze

  • Se si utilizza Firefox, la finestra di messaggio verrà letto, "il colore del testo è rgb (255, 0, 0)." Questo accade perché Firefox visualizza il colore utilizzando il sistema RGB. In RGB, il rosso è "255, 0, 0" (vedi Risorse).