So ändern Sie die Schriftfarbe in Textarea

HTML Dokumentobjektmodell oder DOM, bietet Web-Entwicklern die Möglichkeit, alle Webelement zu ändern, die auf einer Website angezeigt wird. Beispielsweise können Sie mit ein wenig wissen über den DOM, die Schriftfarbe einer textarea ändern. Eine Textarea ist ein mehrzeiliges Textfeld. Es ist nützlich für die Erstellung von Benutzer-Eingabe-Formulare und interaktive Text-Editoren. Um ein Effekt "Farbe ändern" auf ein Textfeld anwenden, ändern Sie seine Eigenschaften mit einer JavaScript-Funktion.

Anweisungen

1 Eine Ihrer Web-Seiten mit Notepad oder einem HTML-Editor zu öffnen.

2 Suchen Sie "< >" Textabschnitt aus, und fügen Sie diesen Code:

< Textarea Id = "TextArea1" Spalten = "20" Zeilen = "2" >< / Textarea >

< Eingabe-Id = "Button1" Type = "Button" Value = "Klicken Sie zum Ändern von Text Area Schriftfarbe" onclick="changeColor()" / >

Dadurch entsteht ein Textarea-Steuerelement und ein Button, der seine Schriftfarbe beim Klicken auf ändern wird.

3 Fügen Sie diesen Code zum Abschnitt "< Script >" des Dokuments:

Var ControlToChange = "TextArea1";

Var NewColor = "grün";

Die erste Zeile enthält den Namen des Steuerelements zu ändern, die Variable mit dem Namen "ControlToChange." Beachten Sie, dass dieser Name die Textarea-Steuerelement-ID übereinstimmt. Die Variable in der zweiten Zeile enthält den Namen der neuen Farbe. Ändern Sie dies in eine beliebige Farbe, die Ihnen gefallen. Schließen Sie den Namen in Anführungszeichen, wie oben gezeigt.

4 Fügen Sie diese JavaScript-Funktion unterhalb der vorherigen Codezeilen:

Funktion changeColor() {}

TempObject = document.getElementById(controlToChange);

tempObject.style.color = NewColor;

}

Dieser Code Ruft einen Verweis auf das Textarea-Steuerelement und seine Schriftfarbe durch Ändern der Eigenschaft "style.color" geändert.

5 Speichern Sie das HTML-Dokument, und öffnen Sie sie in Ihrem Browser. Geben Sie Text in der TextArea-Komponente, und klicken Sie auf. Die Schriftfarbe ändert sich die Farbe, die Sie in den JavaScript-Code definiert.

Tipps & Warnungen

• Können Sie auch das Textfeld Hintergrundfarbe ändern, durch Hinzufügen "tempObject.style.backgroundColor = NewColor" bis zum Ende der JavaScript-Funktion.