Diese Studie wird die Methoden zum Ändern der Textfarbe in JavaScript veranschaulichen.
Wie ändere ich die Textfarbe in JavaScript?
Verwenden Sie zum Ändern der Textfarbe in JavaScript die unten aufgeführten vordefinierten JavaScript-Methoden:
- style.color-Eigenschaft mit der getElementById()-Methode
- style.color-Eigenschaft mit der querySelector()-Methode
Lassen Sie uns diese Methoden einzeln erläutern.
Methode 1: Ändern Sie die Textfarbe mit der Eigenschaft style.color mit der Methode getElementById()
Um die Farbe des Textes zu ändern, können Sie die Schaltfläche „ getElementById() “-Methode mit dem „ Stil.Farbe ' Eigentum. In einem solchen Szenario kann auf das Textelement mit der Methode getElementById() zugegriffen werden und dann das Farbattribut mit Hilfe der HTML-Eigenschaft style.color angewendet werden.
Syntax
Verwenden Sie die angegebene Syntax zum Ändern der Textfarbe, indem Sie die Eigenschaft color mit Hilfe der Methode getElementById() verwenden:
dokumentieren. getElementById ( 'Ich würde' ) . Stil . Farbe = 'Farbe' ;Das ' Ich würde ” ist die ID des Elements, das angegeben ist, um auf das Textelement zuzugreifen und dann seine Farbe mit der Eigenschaft style.color zu ändern.
Gehen Sie zum folgenden Beispiel, um das angegebene Konzept zu verstehen!
Beispiel
Zuerst erstellen wir eine Überschrift mit taggen und eine ID zuweisen “ Ich würde “, das für den Zugriff auf das h4-Element verwendet wird, erstellen Sie dann eine Schaltfläche, die eine Funktion mit dem Namen „ Farbe ändern() ” in einer JavaScript(JS)-Datei definiert, wenn das onclick-Ereignis der hinzugefügten Schaltfläche ausgelöst wird:
< h4-ID = 'Ich würde' > Willkommen bei LinuxHint h4 >< Schaltflächentyp = 'Taste' anklicken = 'Farbe ändern()' > Klicken Sie hier, um die Magie zu sehen Taste >
Definieren Sie in der JS-Datei eine Funktion mit dem Namen „ Farbe ändern() “ und erhalten Sie die Überschrift, indem Sie ihre ID an die Methode getElementById() übergeben und dann ihre Farbe ändern:
Funktion changeColor ( ) {dokumentieren. getElementById ( 'Ich würde' ) . Stil . Farbe = 'rot' ;
}
Geben Sie zuletzt die Quelle der JavaScript-Datei mit dem src-Tag in der HTML-Datei an:
< script src = './JSfile.js' > Skript >Aus der Ausgabe ist ersichtlich, dass beim Klicken auf die hinzugefügte Schaltfläche das Textelement seine Farbe in „ rot “:
Schauen wir uns die andere Methode an!
Methode 2: Ändern Sie die Textfarbe mit der Eigenschaft style.color mit der Methode querySelector()
Sie können auch die Farbe des Textes ändern, indem Sie das „ querySelector() ”-Methode mit der style.color-Eigenschaft. Es greift auf das Element sowohl mit der ID als auch mit der zugewiesenen Klasse zu, während die Methode getElementById() nur das Element mit der zugewiesenen ID abruft.
Syntax
Verwenden Sie die folgende Syntax, um die Textfarbe mithilfe der Eigenschaft color mit Hilfe der Methode querySelector() zu ändern:
dokumentieren. querySelector ( 'ID/Klassenname' ) . Stil . Farbe = 'Farbe' ;Beispiel
Hier verwenden wir die -Tag, um einen Absatz mit der Klasse namens „ Farbe “, das hilft, auf das
-Element und eine Schaltfläche zuzugreifen, die das JavaScript „ Farbe ändern() ”-Methode, wenn ihr onclick-Ereignis ausgelöst wird:
< p Klasse = 'Farbe' > Willkommen bei LinuxHint p >< Schaltfläche anklicken = 'Farbe ändern()' > Klicken Sie hier, um die Magie zu sehen Taste >
In der Definition des „ Farbe ändern() “-Methode, rufen wir die „ querySelector() ”-Methode durch Übergeben des Klassennamens mit Punkt (.), der angibt, dass auf das Element basierend auf seinem Klassennamen zugegriffen wird, und wenden Sie dann die Farbeigenschaft darauf an:
Funktion changeColor ( ) {dokumentieren. querySelector ( '.Farbe' ) . Stil . Farbe = 'Magenta' ;
}
Um jedoch eine ID in einem HTML-Element zu verwenden und mit der Methode querySelector() darauf zuzugreifen, fügen Sie das „ # ” Schild mit ID-Name:
dokumentieren. querySelector ( '#Farbe' ) . Stil . Farbe = 'Magenta' ;Ausgabe
Wir haben den einfachsten Ansatz zum Ändern der Textfarbe in JavaScript zusammengestellt.
Fazit
Zum Ändern der Textfarbe können Sie die Eigenschaft style.color mit Hilfe der Methode getElementById() oder der Methode querySelector() verwenden. Die getElementById()-Methode wird verwendet, um auf das HTML-Element basierend auf seiner zugewiesenen ID zuzugreifen, während die querySelector()-Methode auf das Element basierend auf der zugewiesenen ID oder der Klasse durch Angabe von (#)- bzw. (.)-Zeichen zugreift. Diese Studie veranschaulichte das einfache Verfahren zum Ändern der Textfarbe in JavaScript.