Comment changer la couleur du texte en javascript

JavaScript est un langage dynamique qui fournit diverses options de programmation pour effectuer plusieurs tâches. Par exemple, changer la couleur d'un élément est l'une des tâches les plus fréquentes lors du développement d'un site Web. Pour ce faire, d'abord, obtenez la référence à l'élément HTML que vous souhaitez modifier la couleur, puis attribuez-le la valeur de couleur dans JavaScript Style Color Attribut.

Cette étude illustrera les méthodes de modification de la couleur du texte en JavaScript.

Comment changer la couleur du texte en javascript?

Pour modifier la couleur du texte en JavaScript, utilisez les méthodes JavaScript prédéfinies mentionnées:

• style.Propriété de couleur avec getElementById ()
• style.Propriété de couleur avec méthode QueySelector ()

Expliquons ces méthodes individuellement.

Méthode 1: Modifier la couleur du texte à l'aide du style.Propriété de couleur avec getElementById ()

Pour changer la couleur du texte, vous pouvez utiliser le «getElementByid ()«Méthode avec le«style.couleur" propriété. Dans un tel scénario, l'élément texte est accessible en utilisant la méthode GetElementById (), puis appliquer l'attribut de couleur à l'aide du style HTML.propriété de couleur.

Syntaxe

Utilisez la syntaxe donnée pour modifier la couleur du texte en utilisant la propriété de couleur à l'aide de la méthode GetElementById ():

document.getElementByid ("id").style.color = "couleur";

Le "identifiant"Est l'ID de l'élément spécifié pour accéder à l'élément texte, puis modifier sa couleur à l'aide du style.propriété de couleur.

Dirigez-vous vers l'exemple ci-dessous pour comprendre le concept déclaré!

Exemple

Tout d'abord, nous créerons une tête en utilisant

Tag et attribuer un ID "identifiant«Qui est utilisé pour accéder à l'élément H4, puis crée un bouton qui invoque une fonction nommée«changer de couleur()"Défini dans un fichier JavaScript (JS) lorsque l'événement onClick du bouton ajouté est déclenché:

Bienvenue à Linuxhint

Cliquez pour voir la magie

Dans le fichier js, définissez une fonction nommée "changer de couleur()”Et obtenez le titre en passant son identifiant à la méthode GetElementById (), puis changez sa couleur:

fonction changEColor ()
document.getElementByid ("id").style.color = "rouge";

Enfin, spécifiez la source du fichier JavaScript à l'aide de la balise SRC dans le fichier html:

Il peut être vu à partir de la sortie que lorsque le bouton ajouté est cliqué, l'élément texte a changé sa couleur en «rouge»:

Voyons l'autre méthode!

Méthode 2: Modifier la couleur du texte à l'aide du style.Propriété de couleur avec méthode QueySelector ()

Vous pouvez également modifier la couleur du texte en utilisant le «QuerySelector ()”Méthode avec style.propriété de couleur. Il accède à l'élément avec ID ou la classe attribuée tandis que la méthode GetElementById () récupère simplement l'élément avec son ID attribué.

Syntaxe

Utilisez la syntaxe suivante pour modifier la couleur du texte à l'aide de la propriété de couleur à l'aide de la méthode QueySelector ():

document.queySelector ("id / className").style.color = "couleur";

Exemple

Ici, nous utiliserons le

Tag pour ajouter un paragraphe avec la classe nommée "couleur», Cela aidera à accéder au

élément et un bouton qui appellera le javascript "changer de couleur()«Méthode lorsque son événement OnClick sera déclenché:

Bienvenue à Linuxhint

Cliquez pour voir la magie

Dans la définition du «changer de couleur()«Méthode, nous invoquerons le«QuerySelector ()”Méthode en passant le nom de classe avec DOT (.) qui indique que l'élément est accessible en fonction de son nom de classe, puis appliquez une propriété de couleur dessus:

fonction changEColor ()
document.queySelector (".couleur").style.color = "magenta";

Cependant, pour utiliser un ID dans un élément HTML et y accéder à l'aide de la méthode QueySelector (), ajoutez le "#”Signe avec le nom de l'ID:

document.queySelector ("# couleur").style.color = "magenta";

Sortir

Nous avons rassemblé l'approche la plus simple pour modifier la couleur du texte en javascript.

Conclusion

Pour changer la couleur du texte, vous pouvez utiliser le style.Propriété de couleur à l'aide de la méthode GetElementById () ou de la méthode QueySelector (). La méthode getElementById () est utilisée pour accéder à l'élément HTML en fonction de son ID attribué, tandis que la méthode QuerySelector () accède à l'élément en fonction de l'ID attribué ou de la classe en spécifiant (#) ou ((.) Signes, respectivement. Cette étude a illustré la procédure simple pour modifier la couleur du texte en javascript.