Maison > interface Web > Questions et réponses frontales > Comment changer la couleur en utilisant javascript

Comment changer la couleur en utilisant javascript

青灯夜游
Libérer: 2022-01-23 18:19:04
original
9393 Les gens l'ont consulté

Comment utiliser javascript pour changer la couleur : 1. Utilisez l'instruction "element object.style.color = "color value";" pour changer la couleur du texte ; 2. Utilisez l'instruction "element object.style.backgroundColor = "color" value";" instruction pour changer la couleur d’arrière-plan.

Comment changer la couleur en utilisant javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Utilisez javascript pour changer la couleur

1 Utilisez la propriété color de l'objet Style pour changer la couleur du texte

La propriété color peut définir la couleur du texte.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div id="box">元素内容</div><br />
		<button onclick="myFunction()">改变文本颜色</button>
		<script>
			function myFunction() {
				var box = document.getElementById("box");
				box.style.color = "red";
			}
		</script>
	</body>

</html>
Copier après la connexion

Comment changer la couleur en utilisant javascript

2. Utilisez la propriété backgroundColor de l'objet Style pour modifier la couleur d'arrière-plan. La propriété backgroundColor peut définir la couleur d'arrière-plan de l'élément.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div id="box">元素内容</div><br />
		<button onclick="myFunction()">改变背景颜色</button>
		<script>
			function myFunction() {
				var box = document.getElementById("box");
				box.style.backgroundColor = "red";
			}
		</script>
	</body>

</html>
Copier après la connexion

【Recommandations associées : Comment changer la couleur en utilisant javascriptTutoriel d'apprentissage Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal