Changer la couleur d'arrière-plan en JavaScript
Ce tutoriel expliquera comment changer la couleur d’arrière-plan à l’aide de la propriété backgroundColor en JavaScript.
Modifier la couleur d’arrière-plan à l’aide de la propriété backgroundColor en JavaScript
Nous pouvons changer la couleur de fond en utilisant la propriété backgroundColor en JavaScript. Pour utiliser cette propriété, vous devez obtenir l’élément dont vous souhaitez modifier la couleur d’arrière-plan, puis vous pouvez utiliser la propriété backgroundColor pour définir la couleur d’arrière-plan.
Par exemple, créons une page en HTML et changeons la couleur de fond du corps en vert à l’aide de la propriété backgroundColor. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
document.body.style.backgroundColor = 'green';
</script>
</body>
</html>
Vous pouvez également obtenir l’élément avec l’identifiant ou le nom de la classe. Pour récupérer un élément en utilisant son identifiant, vous pouvez utiliser la fonction getElementById(). Pour récupérer un élément en utilisant sa classe, vous pouvez utiliser la fonction getElementsByClassName().
Par exemple, récupérons un élément par son identifiant et changeons sa couleur de fond en utilisant la propriété backgroundColor. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id='myID'>
Hello Wold
</p>
<script type="text/javascript">
document.getElementById('myID').style.backgroundColor = 'green';
</script>
</body>
</html>
Le code ci-dessus ne changera que la couleur d’arrière-plan de l’élément avec l’identifiant myID et non la section du corps entier. Vous modifiez également la couleur d’arrière-plan d’un élément à l’aide du code couleur de différentes couleurs au lieu de la modifier à l’aide du nom de la couleur.
Écrivons un code pour changer la couleur de fond d’un texte à l’aide d’un bouton. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onClick="Mycolor()">Change Color</button>
<div id="myID">Hello World</div>
<script type='text/javascript'>
function Mycolor() {
var element = document.getElementById("myID");
element.style.backgroundColor='#900';
}
</script>
</body>
</html>
Dans ce code, vous verrez un bouton et un texte. Lorsque vous appuyez sur le bouton, la couleur d’arrière-plan du texte change en fonction de la couleur donnée.
