Come modificare Colore carattere in Textarea

November 23

Come modificare Colore carattere in Textarea


Document Object Model di HTML o DOM, offre agli sviluppatori web la possibilità di modificare ogni elemento Web che appare su un sito web. Ad esempio, con un po 'di conoscenza del DOM, è possibile cambiare il colore del carattere di una textarea. Un textarea è una casella di testo su più righe. E 'utile per la creazione di moduli di input utente e editor di testo interattivi. Per applicare un effetto di cambio di colore ad una textarea, alterare le sue proprietà utilizzando una funzione JavaScript.

istruzione

1 Aprire una delle tue pagine Web utilizzando Blocco note o un editor HTML.

2 Individuare la sezione "<body>", e aggiungere questo codice:

<textarea id = "cols TextArea1" = righe "20" = "2"> </ textarea>

<Input id = "Button1" type = valore "pulsante" = "Clicca per cambiare area di testo Colore carattere" onclick = "ChangeColor ()" />

Questo crea un controllo textarea e un pulsante che cambierà il suo colore del carattere quando si fa clic.

3 Aggiungere questo codice alla sezione "<script>" del documento:

var controlToChange = "TextArea1";

var newColor = "verde";

La prima linea memorizza il nome del controllo da modificare nella variabile denominata "controlToChange." Si noti che questo nome corrisponda al ID del controllo textarea. La variabile nella seconda riga contiene il nome del nuovo colore. Cambiare questo a qualsiasi colore che ti piace. Racchiudere il nome del colore tra virgolette come mostrato sopra.

4 Aggiungere questa funzione JavaScript di sotto delle precedenti linee di codice:

Funzione ChangeColor () {

tempObject = document.getElementById (controlToChange);

tempObject.style.color = newColor;

}

Questo codice recupera un riferimento al controllo textarea e cambia il suo colore del carattere modificando la proprietà "style.color".

5 Salvare il documento HTML e aprirlo nel browser. Digitare il testo nella textarea e fare clic sul pulsante. Il colore del carattere cambierà il colore definito nel codice JavaScript.

Consigli e avvertenze

  • È inoltre possibile modificare il colore di sfondo della textarea con l'aggiunta di "tempObject.style.backgroundColor = newColor" al fine della funzione JavaScript.