Comment changer la couleur du texte en JavaScript

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, obtenez d'abord la référence à l'élément HTML dont vous souhaitez modifier la couleur, puis attribuez-lui la valeur de couleur dans l'attribut de couleur de style JavaScript.

Cette étude illustrera les méthodes pour changer 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 ci-dessous :







Expliquons ces méthodes individuellement.



Méthode 1 : Modifier la couleur du texte à l'aide de la propriété style.color avec la méthode 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 de texte est accessible à l'aide de la méthode getElementById(), puis applique l'attribut de couleur à l'aide de la propriété HTML style.color.



Syntaxe





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

document. getElementById ( 'identifiant' ) . style . Couleur = 'Couleur' ;

La ' identifiant ' est l'identifiant de l'élément spécifié pour accéder à l'élément de texte, puis modifier sa couleur à l'aide de la propriété style.color.



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

Exemple

Tout d'abord, nous allons créer un titre en utilisant

marquer et attribuer un identifiant ' identifiant ' qui est utilisé pour accéder à l'élément h4, puis créez 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é :

< identifiant h4 = 'identifiant' > Bienvenue sur LinuxHint h4 >

< type de bouton = 'bouton' sur clic = 'changer de couleur()' > Cliquez pour voir la magie bouton >

Dans le fichier JS, définissez une fonction nommée ' changer de couleur() ” et récupérez l'en-tête en passant son identifiant à la méthode getElementById() puis changez sa couleur :

fonction changer de couleur ( ) {

document. getElementById ( 'identifiant' ) . style . Couleur = 'rouge' ;

}

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

< source de script = './JSfile.js' > scénario >

On peut voir à partir de la sortie que lorsque le bouton ajouté est cliqué, l'élément de texte a changé sa couleur en ' rouge ” :

Voyons l'autre méthode !

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

Vous pouvez également modifier la couleur du texte à l'aide de la touche ' querySelector() ” méthode avec la propriété style.color. Il accède à l'élément avec à la fois l'identifiant ou la classe assignée tandis que la méthode getElementById() récupère simplement l'élément avec son identifiant assigné.

Syntaxe

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

document. querySelector ( 'id/className' ) . style . Couleur = 'Couleur' ;

Exemple

Ici, nous utiliserons le

balise pour ajouter un paragraphe avec la classe nommée ' Couleur ', qui aidera à accéder à l'élément

et un bouton qui appellera le JavaScript' changer de couleur() ” lorsque son événement onclick sera déclenché :

< p classer = 'Couleur' > Bienvenue sur LinuxHint p >

< bouton onclick = 'changer de couleur()' > Cliquez pour voir la magie bouton >

Dans la définition du ' changer de couleur() ', nous invoquerons la méthode ' querySelector() ” en passant le nom de la classe avec un point (.) qui indique que l'élément est accessible en fonction de son nom de classe, puis appliquez-lui la propriété color :

fonction changer de couleur ( ) {

document. querySelector ( '.Couleur' ) . style . Couleur = 'Magenta' ;

}

Cependant, pour utiliser un identifiant dans un élément HTML et y accéder à l'aide de la méthode querySelector(), ajoutez le ' # ' signe avec le nom d'identification :

document. querySelector ( '#Couleur' ) . style . Couleur = 'Magenta' ;

Production

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

Conclusion

Pour changer la couleur du texte, vous pouvez utiliser la propriété style.color à l'aide de la méthode getElementById() ou de la méthode querySelector(). La méthode getElementById() est utilisée pour accéder à l'élément HTML en fonction de son identifiant attribué, tandis que la méthode querySelector() accède à l'élément en fonction de l'identifiant attribué ou de la classe en spécifiant les signes (#) ou (.), respectivement. Cette étude a illustré la procédure simple pour changer la couleur du texte en JavaScript.