So ändern Sie die Textfarbe in JavaScript

JavaScript ist eine dynamische Sprache, die verschiedene Programmieroptionen zur Ausführung mehrerer Aufgaben bietet. Zum Beispiel ist das Ändern der Farbe eines Elements eine der häufigsten Aufgaben bei der Entwicklung einer Website. Wenn Sie dies tun, erhalten Sie zuerst den Hinweis auf das HTML -Element, das Sie die Farbe ändern möchten.

Diese Studie veranschaulicht die Methoden zum Ändern der Farbe des Textes in JavaScript.

So ändern Sie die Textfarbe in JavaScript?

Verwenden Sie die folgenden vordefinierten JavaScript-Methoden, um die Textfarbe in JavaScript zu ändern:

• Stil.Farbeigenschaft mit GetElementById () Methode
• Stil.Farbeigenschaft mit QuerySelector () Methode

Erklären wir diese Methoden einzeln.

Methode 1: Textfarbe mit Stil ändern.Farbeigenschaft mit GetElementById () Methode

Um die Farbe des Textes zu ändern, können Sie die „verwenden“GetElementById ()Methode mit der “Stil.Farbe" Eigentum. In einem solchen Szenario kann auf das Textelement mit der Methode getElementById () zugegriffen werden und dann das Farbattribut mit Hilfe des HTML -Stils anwenden.Farbeigenschaft.

Syntax

Verwenden Sie die angegebene Syntax zum Ändern der Textfarbe mithilfe der Color -Eigenschaft mithilfe der GetElementById () -Methode:

dokumentieren.GetElementById ("ID").Stil.color = "color";

Der "AusweisIst die ID des Elements, die angegeben ist, um auf das Textelement zuzugreifen und dann seine Farbe mit dem Stil zu ändern.Farbeigenschaft.

Gehen Sie zum folgenden Beispiel, um das angegebene Konzept zu verstehen!

Beispiel

Erstens werden wir eine Überschrift mithilfe verwenden

Tag und zuweisen Sie eine ID “Ausweis"Das wird verwendet, um auf das H4 -Element zuzugreifen, und erstellen Sie dann eine Schaltfläche, die eine Funktion namens"Farbe ändern()In einer JavaScript (JS) -Datei definiert, wenn das Onclick -Ereignis der hinzugefügten Taste ausgelöst wird:

Willkommen bei LinuxHint

Klicken Sie hier, um die Magie zu sehen

Definieren Sie in der JS -Datei eine Funktion namens “Farbe ändern()”Und lassen Sie sich die Überschrift erhalten, indem Sie seine ID an die GetelementById () -Methode weitergeben und dann die Farbe ändern:

function echnecolor ()
dokumentieren.GetElementById ("ID").Stil.color = "rot";

Geben Sie zuletzt die Quelle der JavaScript -Datei mit dem SRC -Tag in der HTML -Datei an:

Aus der Ausgabe ist ersichtlich, dass das Textelement beim Klicken auf die Schaltfläche hinzugefügt wird, die seine Farbe auf “geändert hat“Rot”:

Schauen wir uns die andere Methode an!

Methode 2: Textfarbe mit Stil ändern.Farbeigenschaft mit QuerySelector () Methode

Sie können auch die Farbe des Textes mit der “ändernQuerySelector ()Methode mit Stil.Farbeigenschaft. Es greift auf das Element mit der ID oder der zugewiesenen Klasse zu, während die Methode getElementById () das Element nur mit seiner zugewiesenen ID abruft.

Syntax

Verwenden Sie die folgende Syntax, um die Textfarbe mithilfe von QuerySelector () -Methode mithilfe der Farbeigenschaft zu ändern:

dokumentieren.QuerySelector ("ID/ClassName").Stil.color = "color";

Beispiel

Hier werden wir die verwenden

Tag zum Hinzufügen eines Absatzes mit der Klasse namens “Farbe”, Das hilft beim Zugang zu

Element und eine Schaltfläche, die das JavaScript aufruft “Farbe ändern()Methode, wenn das Onclick -Ereignis ausgelöst wird:

Willkommen bei LinuxHint

Klicken Sie hier, um die Magie zu sehen

In der Definition der “Farbe ändern()"Methode, wir werden die" aufrufen "QuerySelector ()Methode durch Übergabe des Klassennamens mit Punkt (.) Auf das Element wird anhand seines Klassennamens zugegriffen und dann die Farbeigenschaft darauf anwenden:

function echnecolor ()
dokumentieren.QuerySelector (".Farbe").Stil.color = "magenta";

Um jedoch eine ID in einem HTML -Element zu verwenden und mithilfe der QuerySelector () -Methode darauf zugreifen zu können, fügen Sie die “hinzu“#”Zeichen mit ID -Namen:

dokumentieren.QuerySelector ("#Farbe").Stil.color = "magenta";

Ausgang

Wir haben den einfachsten Ansatz gesammelt, um die Textfarbe in JavaScript zu ändern.

Abschluss

Zum Ändern der Textfarbe können Sie den Stil verwenden.Farbeigenschaft mit Hilfe von GetElementById () -Methode oder QuerySelector () -Methode. Mit der Methode von GetelementById () wird basierend auf der zugewiesenen ID auf das HTML -Element zugreifen, während die Methode querySelector () auf das Element zugreift, basierend auf der zugewiesenen ID oder der Klasse, indem (#) oder (#) oder ((.) Zeichen. Diese Studie zeigte das einfache Verfahren zum Ändern der Textfarbe in JavaScript.