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 :
- propriété style.color avec la méthode getElementById()
- propriété style.color avec la méthode querySelector()
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.