Changement couleur texte div

**thomix68** · 23/04/2013, 22h41

Bonjour a tous,

j'ai cree un script permettant d'editer les css d'un lien les modification sont prises en compte en temp relle sur le lien d'exemple hors j'ai ajouter un script avec une palette de couleur cela change bien le value de la case couleur ainsi que dans le code html d'exemple mais sur l'exemple la couleur ne change pas lors du passage sur une couleur de la palette avez vous une idee comment cela pourrait fonctionner ? je suis debutant et j'ai essayer plein de chose mais rien de concluant je vous donne 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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
 
<form action="#" method="post" name="form" id="form" >
 
<table width="1151" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="569" height="387">
 
 
 
 
 
<script type="text/javascript">
function DemoPolice(champ,demo){
	var str=champ.value;
	txtdemo=document.all? eval("document.all."+demo) : document.getElementById(demo);
	txtdemo.style.fontFamily=str;
}
 
function DemoCouleur(champ,demo){
	var str=champ.value;
	str=str.toUpperCase().replace(/[^0-9A-F]/,"");
	if (str.length==3){
		imgdemo = document.all? eval("document.all."+demo) : document.getElementById(demo);
		imgdemo.style.color = str;
	}
	champ.value=str;
}
 
function DemoTaille(champ,demo){
	var str=champ.value;
	str=str.toUpperCase().replace(/[^0-9A-F]/,"");
	if (str.length==2){
		imgdemo = document.all? eval("document.all."+demo) : document.getElementById(demo);
		imgdemo.style.fontSize = str;
	}
	champ.value=str;
}
 
function DemoTexte(champ,demo){
	var str=champ.value;
	if (str.length==30){
		imgdemo = document.all? eval("document.all."+demo) : document.getElementById(demo);
document.getElementById("Poli1").innerHTML = str;
	}
	champ.value=str;
}
</SCRIPT><script type="text/javascript">
bloc = true;
function hexa(couleur)
{
	if(bloc)
		document.form.General_Texte_Couleur.value = couleur;
		maj3();
}
function palette() { 
document.write("<TABLE border='0' cellpadding='0' cellspacing='0' ><TR>"); 
var h=new Array('00','33','66','99','CC','FF'); 
var col=""; 
for(var i=0;i<6;i++) { 
for(var j=0;j<6;j++) { 
for(var k=0;k<6;k++) { 
col=""+h[i]+h[j]+h[k]; 
document.write("<TD width='10' height='10' bgcolor='"+col+"' onMouseOver=\"hexa('"+col+"')\" onClick=\"if(bloc) { bloc = false; } else { bloc = true; } \"></TD>"); 
} 
} 
document.write("</tr>"); 
} 
document.write("</TABLE>"); 
} 
</SCRIPT> 
 
      <p>Parametrage style du lien :</p>
<p>&nbsp;</p>
<p>Police de caractere :
  <select name="General_Police" id="General_Police" onchange="DemoPolice(this,'Poli1'); maj5();" >
    <option value='Arial, Verdana, Helvetica' selected>Arial, Verdana, Helvetica</option>
    <option value='"Comic Sans MS", "Comic Sans", Cursive'>"Comic Sans MS", "Comic Sans", Cursive</option>
    <option value='Arial, Helvetica, Sans-Serif'>Arial, Helvetica, Sans-Serif</option>
    <option value='Courier, "Courier New", Monospace'>Courier, "Courier New", Monospace</option>
    <option value='Garamond, Times, Serif'>Garamond, Times, Serif</option>
    <option value='Georgia, Times, Serif'>Georgia, Times, Serif</option>
    <option value='Tahoma, Verdana, Arial'>Tahoma, Verdana, Arial</option>
    <option value='Times, "Times New Roman", Serif'>Times, "Times New Roman", Serif</option>
    <option value='Univers, Arial, Sans-Serif'>Univers, Arial, Sans-Serif</option>
    <option value='Verdana, Lucida, Sans-Serif'>Verdana, Lucida, Sans-Serif</option>
  </select>
  <BR />
<div align='center'>
<SCRIPT language="JavaScript"> 
palette(); 
</SCRIPT>
  Couleur du texte : #<input maxlength=6 size=6 value="000000" name="General_Texte_Couleur" id="General_Texte_Couleur" onKeyUp="DemoCouleur(this, 'Poli1'); maj3();">
</p>	
<p>Taille du texte : #
  <input maxlength=6 size=6 value="10" name="General_Texte_Taille"  id="General_Texte_Taille" onKeyUp="DemoTaille(this, 'Poli1') ;maj();">
</p>
<p>Texte : #
  <input onkeyup="document.getElementById('Poli1').innerHTML =  this.value" maxlength=30 size=30 value="Afficher le num" name="position: absolute" id="position: absolute">
<br />
  <br />
  <b>Rendu non cliquer :</b><br />
</p>
<DIV id="Poli1" style="font-size:13px">Afficher le num</DIV>  </td>
    <td width="582"><script type="text/javascript">
function DemoPolice2(champ,demo){
	var str=champ.value;
	txtdemo=document.all? eval("document.all."+demo) : document.getElementById(demo);
	txtdemo.style.fontFamily=str;
}
 
function DemoCouleur2(champ,demo){
	var str=champ.value;
	str=str.toUpperCase().replace(/[^0-9A-F]/,"");
	if (str.length==3){
		imgdemo = document.all? eval("document.all."+demo) : document.getElementById(demo);
		imgdemo.style.color = str;
	}
	champ.value=str;
}
 
function DemoTaille2(champ,demo){
	var str=champ.value;
	str=str.toUpperCase().replace(/[^0-9A-F]/,"");
	if (str.length==2){
		imgdemo = document.all? eval("document.all."+demo) : document.getElementById(demo);
		imgdemo.style.fontSize = str;
	}
	champ.value=str;
}
 
function DemoTexte2(champ,demo){
	var str=champ.value;
	if (str.length==30){
		imgdemo = document.all? eval("document.all."+demo) : document.getElementById(demo);
document.getElementById("Poli1").innerHTML = str;
	}
	champ.value=str;
}
</SCRIPT>
 
<p>Parametrage AFFICHAGE numero:</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Police de caractere :
  <select name="General_Police2" id="General_Police2" onchange="DemoPolice(this,'Poli2'); maj6();">
    <option value='Arial, Verdana, Helvetica' selected>Arial, Verdana, Helvetica</option>
    <option value='"Comic Sans MS", "Comic Sans", Cursive'>"Comic Sans MS", "Comic Sans", Cursive</option>
    <option value='Arial, Helvetica, Sans-Serif'>Arial, Helvetica, Sans-Serif</option>
    <option value='Courier, "Courier New", Monospace'>Courier, "Courier New", Monospace</option>
    <option value='Garamond, Times, Serif'>Garamond, Times, Serif</option>
    <option value='Georgia, Times, Serif'>Georgia, Times, Serif</option>
    <option value='Tahoma, Verdana, Arial'>Tahoma, Verdana, Arial</option>
    <option value='Times, "Times New Roman", Serif'>Times, "Times New Roman", Serif</option>
    <option value='Univers, Arial, Sans-Serif'>Univers, Arial, Sans-Serif</option>
    <option value='Verdana, Lucida, Sans-Serif'>Verdana, Lucida, Sans-Serif</option>
  </select>
  <BR />
  Couleur du texte : #<input maxlength=6 size=6 value="000000" name="General_Texte_Couleur2" id="General_Texte_Couleur2" onKeyUp="DemoCouleur(this, 'Poli2'); maj4();">
</p>
<p>Taille du texte : #
  <input maxlength=6 size=6 value="10" name="General_Texte_Taille2" id="General_Texte_Taille2" onKeyUp="DemoTaille(this, 'Poli2'); maj2();">
  <br />
  <br />
  <b>Rendu lien cliquer :</b><br />
</p>
<DIV id="Poli2" style="font-size:13px">03.99.99.99.99</DIV></td>
  </tr>
</table></form>
<hr>
<p>&nbsp;</p>
<p>le code html :  </p>
<p>&lt;style&gt;  </p>
<p>.div_son{
  color: #<span id="ss3" name="ss3">00000</span>;   
  font-size: <script type="text/javascript">
function maj() {
	var texte= document.getElementById("General_Texte_Taille").value;		
	document.getElementById('ss').innerHTML = texte;
 
}
maj();
function maj2() {
	var texte2= document.getElementById("General_Texte_Taille2").value;		
	document.getElementById('ss2').innerHTML = texte2;
 
}
maj2();
function maj3() {
	var texte3= document.getElementById("General_Texte_Couleur").value;		
	document.getElementById('ss3').innerHTML = texte3;
 
}
maj3();
function maj4() {
	var texte4= document.getElementById("General_Texte_Couleur2").value;		
	document.getElementById('ss4').innerHTML = texte4;
 
}
maj4();
 
function maj5() {
	var texte5= document.getElementById("General_Police").value;		
	document.getElementById('ss5').innerHTML = texte5;
 
}
maj5();
 
function maj6() {
	var texte6= document.getElementById("General_Police2").value;		
	document.getElementById('ss6').innerHTML = texte6;
 
}
maj6();
</script><span id="ss" name="ss">10</span> px; font-family:<span id="ss5" name="ss5">Arial</span>;
}
<p>.txt_lienaudio{
  color: #<span id="ss4" name="ss4">00000</span>;   
  font-size: <span id="ss2" name="ss2">10</span> px; font-family:<span id="ss6" name="ss6">Arial</span>;
}
<p> &lt;/style&gt;
<p>

je remercie par avance ceux qui pourrait m'aider a resoudre ce petit soucis

**Auteur** · 24/04/2013, 00h08

bonsoir,

je me suis permis de réécrire ton script : j'ai allégé le code....

Code html :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
function changePolice(list)
{
        document.getElementById("Demo").style.fontFamily = list.value;
}
 
function changeColor(obj)
{
        document.getElementById("Demo").style.color = "#"+obj.value;
}
 
function changeSize(obj)
{
        document.getElementById("Demo").style.fontSize = obj.value+"pt";
}
 
//-->
</script> 
 
</head>
 
<body>
 
<form>
 
  <select id="police" onchange="changePolice(this)">
    <option value='Arial, Verdana, Helvetica' selected>Arial, Verdana, Helvetica</option>
    <option value='"Comic Sans MS", "Comic Sans", Cursive'>Comic Sans MS, Comic Sans, Cursive</option>
    <option value='Arial, Helvetica, Sans-Serif'>Arial, Helvetica, Sans-Serif</option>
    <option value='Courier, "Courier New", Monospace'>Courier, Courier New, Monospace</option>
    <option value='Garamond, Times, Serif'>Garamond, Times, Serif</option>
    <option value='Georgia, Times, Serif'>Georgia, Times, Serif</option>
    <option value='Tahoma, Verdana, Arial'>Tahoma, Verdana, Arial</option>
    <option value='Times, "Times New Roman", Serif'>Times, Times New Roman, Serif</option>
    <option value='Univers, Arial, Sans-Serif'>Univers, Arial, Sans-Serif</option>
    <option value='Verdana, Lucida, Sans-Serif'>Verdana, Lucida, Sans-Serif</option>
  </select>
<br /><br />   
 
<label for="textColor">Couleur du texte (en hexadécimal) : #</label>
<input maxlength="6" size="6" value="000000" id="textColor" onkeyup="changeColor(this)" />
<br /><br />  
<label for="textSize">Taille du texte (en points) : #</label>
<input maxlength="6" size="6" value="10" id="textSize" onkeyup="changeSize(this)" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />     
</form>
 
<div id="Demo">
Texte de démonstration
</div>
 
</body>
</html>

Tu dois impérativement séparer le code JS du code HTML sinon c'est le bazar.
Oublie la fonction document.write() c'est une source de problèmes surtout chez les débutants : http://www.developpez.net/forums/d11...en-javascript/
IE reconnait depuis très longtemps la fonction document.getElementById(), les tests avec document.all ne sont plus nécessaires.
<SCRIPT language="JavaScript"> : l'attribut language n'est plus usité pour cette balise, on utilise l'attribut type="text/javascript".
les balises HTML sont écrites en minuscules.
pour les attributs des balises HTML, la syntaxe attribut="valeur" (avec les guillemets) est à privilégier.
on écrit les événements en minuscules : onkeyup et pas onKeyUp.

Changement couleur texte div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager