Changer la couleur d'un div

**crush09** · 15/08/2012, 20h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**headmax** · 15/08/2012, 22h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Auteur** · 15/08/2012, 22h52

bonsoir,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**crush09** · 16/08/2012, 16h05

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é.

Changer la couleur d'un div

JavaScript

Discussions similaires

Partager

Partager