Changer la couleur d'un div

Version imprimable

Bonjour, je commence en programmation et j'aimerais lors d'un click de souris changer la couleur d'un div.

J'ai 2 div quand on clique sur le premier, je voudrais changer la couleur et lorsqu'on clique sur le deuxième, je voudrais que le premier redevienne sans couleur et le deuxième change de couleur.

voici mon code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript" language="JavaScript"> function chgColor (div){ document.getElementById(div).style.backgroundColor='#bab9b7'; var last = div; } </script> <div id="div1"> <a href="#" onclick="chgColor('div1');"> clique 1 </a></div> <div id="div2"> <a href="#" onclick="chgColor('div2');"> clique 2 </a></div>

Salut peut être un bon petit mélange, de hover et te montrer aussi un peu la puissance de css pour le coup dans ton cas de figure:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
<head>
<script type="text/javascript">
 
</script>
<style type="text/css">
div[id*=div]:hover{
	width:100%;
	background-color: #bab9b7;
	cursor:pointer;
}
</style>
</head>
<body>
<script type="text/javascript" language="JavaScript">
 
function chgColor (div){
 
	var objDiv = document.getElementsByClassName("fictif");
	div.style.backgroundColor="#bab9b7";
	for(i in objDiv){
		if(div.id != objDiv[i].id){
			objDiv[i].style.backgroundColor="";
		}
	}
};
 
</script>
 
<div class="fictif" id="div1" onclick="chgColor(this);"> <a href="#"> clique 1 </a></div>
<div class="fictif" id="div2" onclick="chgColor(this);"> <a href="#" > clique 2 </a></div>
</body>
</html>

Si la réponse te convient, un résolu serait sympathique merci ;), bonne soirée.

bonsoir,

En plus de la solution CSS donnée précédemment, voici deux solutions javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var lastDiv = null;
function chgColor(currentDiv)
{
	document.getElementById(currentDiv).style.backgroundColor='#bab9b7';
	if (lastDiv!=null)
	{
		document.getElementById(lastDiv).style.backgroundColor='transparent';
	}
 
	lastDiv = currentDiv;
}
</script> 
 
 
<div id="div1" onclick="chgColor('div1');"> clic 1 </div>
<div id="div2" onclick="chgColor('div2');"> clic 2 </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
var lastDiv = null;
function chgColor(currentDiv)
{
	currentDiv.style.backgroundColor='#bab9b7';
	if (lastDiv!=null)
	{
		lastDiv.style.backgroundColor='transparent';
	}
 
	lastDiv = currentDiv;
}
</script> 
<div id="div1" onclick="chgColor(this);"> clic 1 </div>
<div id="div2" onclick="chgColor(this);"> clic 2 </div>

Deux remarques également :
- définis toujours tes variables, même les variables globales ;
- ne donne jamais à une variable le nom d'une balise, d'un identifiant (id), d'un nom (name) ou d'un mot-clef JS.

16/08/2012, 16h05
crush09

j'ai prit la solution en javascript car elle est plus compatible avec tout les navigateurs, merci à vous 2 pour votre aide, c'est très apprécié.:ccool: