Comment changer une couleur d'arrière-plan d'élément en javascript

Comment changer une couleur d'arrière-plan d'élément en javascript

À l'aide de JavaScript, vous devrez peut-être mettre en surbrillance certaines données ou un élément de votre page Web. Il améliore également la visibilité de l'élément à l'aide de différentes couleurs et rend la page Web globale plus attrayante. Dans de tels cas, l'ajout et la modification de la couleur d'arrière-plan d'un élément est très efficace pour attirer l'attention du lecteur et améliorer la conception du site Web.

Cet article vous guidera pour modifier l'arrière-plan de l'élément en javascript.

Comment changer une couleur d'arrière-plan d'élément en javascript?

Pour modifier la couleur d'arrière-plan d'un élément en JavaScript, appliquez les techniques suivantes:

  • Propriété de fond avec couleur
  • propriété BackgroundColor avec code couleur

Les approches mentionnées seront démontrées une par une!

Méthode 1: Modifiez une couleur d'arrière-plan de l'élément en JavaScript en utilisant la propriété BackgroundColor avec couleur

Le "Couleur de l'arrière plan»La propriété définit la couleur d'arrière-plan de l'élément spécifié. Cette propriété peut être implémentée sur l'un des éléments HTM ajoutés en accédant à son identifiant et en lui attribuant une couleur d'arrière-plan.

Syntaxe

Ici le "objet”Se réfère à l'élément sur lequel la couleur d'arrière-plan sera appliquée.

L'exemple suivant explique le concept déclaré.

Exemple

Dans l'exemple ci-dessous, la balise d'en-tête se verra attribuer un ID nommé «identifiant" et le "Couleur de l'arrière plan!" valeur:

Ensuite, dans le fichier JavaScript, le «document.getElementByid ()«La méthode accédera au«identifiant”De l'élément de cap. Après cela, la propriété BackgroundColor affectera la valeur de couleur "Vert clair«Contre l'ID, qui fait référence à la valeur de cap spécifiée à l'étape précédente:

La sortie de l'implémentation ci-dessus en résultera comme suit:

Dans la sortie, il est observé que la couleur d'arrière-plan n'est appliquée qu'à l'élément de cap sélectionné.

Méthode 2: Modifiez une couleur d'arrière-plan de l'élément dans JavaScript à l'aide de la propriété BackgroundColor avec code couleur

Comme discuté précédemment, le «Couleur de l'arrière plan»La propriété définit la couleur d'arrière-plan de l'élément spécifié. Cette propriété peut également être implémentée sur l'élément spécifié à l'aide du code couleur RVB.

Regardez l'exemple suivant pour la démonstration:

Exemple

Tout d'abord, nous ajouterons un paragraphe en utilisant le

Tag et attribuez-le un identifiant nommé "identifiant»Et une valeur comme indiqué ci-dessous:

Ensuite, le «getElementByid ()»La méthode accédera également à l'élément de paragraphe avec l'ID spécifié et attribuera la couleur d'arrière-plan à l'aide de la propriété BackgroundColor. Ici, "# 090"Indique le"RVB”Code de nuance moyenne foncée de couleur verte:

Sortir

Dans la mise en œuvre ci-dessus, la couleur verte est le résultat de «RGB-> 090», Dans lequel 9 fait référence à l'intensité de la couleur verte.

Conclusion

Pour modifier la couleur d'arrière-plan d'un élément en JavaScript, le «Couleur de l'arrière plan»La propriété avec la méthode de couleur peut être utilisée pour accéder à l'ID spécifique et attribuer une couleur d'arrière-plan particulière. Il est utilisé avec le «RVB»Code pour appliquer une nuance de couleur spécifique à l'élément HTML sélectionné. Cet article guidé lié à la méthode de modification de la couleur d'arrière-plan de l'élément en javascript.