Schriftfarben mit Javascript ändern

Mit JavaScript kann Webentwickler Inhalt und Stil-Attribute auf einer Webseite dynamisch ändern. Ändern der Farbe eines Stückes von Text auf einer Seite ist eine einfache, aber effektive Art zieht die Aufmerksamkeit des Benutzers – beispielsweise können Sie die Farbe eines Etiketts auf ein Formularfeld zu rot wechseln wenn der Benutzer keine Angaben macht, die er einreichen muss.

Anweisungen

1 Öffnen Sie in Ihrem bevorzugten Text-Editor die HTML-Datei, die den Text enthält, den Sie ändern möchten.

2 Identifizieren Sie den Text, dessen Farbe Sie ändern möchten. Dieser und nur dieser Text müssen in eine eigene HTML-Element, z. B. einen Absatz-Tag (< p >), ein Block-Element (< Div >) oder ein Inline-Element (< Span >), enthalten sein, denn Sie die Farbe auf dieses Element anwenden werden und dadurch sich die Farbe des gesamten Text drin ändert.

Wenn Sie der zu ändernden Text bereits in seinem eigenen Element ist (z. B. < p > Ändern der Farbe von diesen ganzen Paragraphen </p >), dann gehen Sie zum nächsten Schritt.

Wenn Sie möchten nur ändern die Farbe des ein Fragment des Textes innerhalb eines Elements (z. B. das Wort \"color\"< p > die Farbe von Text </p > ändern), dann umgeben dieses Fragment in einem < Span >-Tag, um es zu isolieren. Für das vorherige Beispiel müssten Sie < p > Ändern der Farbe < Span > < / span > der Text </p >.

3 Das Element mit dem Text, den Sie mithilfe der \"id\ ändern möchten einen Bezeichner zuweisen" Attribut. Diese Kennung muss keines andere Element auf der Seite angehören. Zum Beispiel:

< p > Wechsel der < span-Element-Id = \ "Colorize_me\" > Farbe < / span > der Text </p >

4 Hinzufügen ein < Script >-Tags in Ihrem Dokuments < Head > Element, das eine Funktion zum Ändern der Farbe des Textes enthalten werden:

< Skript Typ = \ "Text/Javascript\" >Funktion changeTextColor(){}< / script >

5 Fügen Sie im Körper dieser Funktion (zwischen den geschweiften Klammern) die folgende Codezeile:

Document.getElementById(\"colorize_me\").style.color = \"red\"GEHEN

Ersetzen \"colorize_me\" mit der ID, die Sie in Schritt 3 und ersetzen \"red\ zugewiesen" mit der Farbe, die Sie wünschen, um den Text.

Die \"document\" Verweis gibt das Element, das das gesamte HTML-Dokument darstellt. Aufrufen der \"getElementById\"-Funktion gibt das Element mit dem angegebenen Bezeichner und von dort aus erreichen Sie die \"style\" Eigenschaft, die Eigenschaften von CSS (Cascading Style Sheets) enthält, eine davon \"color ist (siehe Ressourcen). \"

6 Rufen Sie diese Funktion aus einer entsprechenden Stelle im Dokument. Beispielsweise erzeugt die folgende Zeile einen Link, der die Farbe des Textes ändern wird, wenn der Benutzer darauf klickt:

< a Href = \ "Javascript:void (0) \" Onclick = \ "ChangeTextColor (); \" > Klick mich </a >