JS ne reconnait pas le CSS non initialis� dans la balise?

**SPACHFR** · 27/08/2010, 10h17

Bonjour,

Je fais un petit test de changement de taille d'un DIV en javascript. Cependant j'ai un probl�me avec le CSS.
Dans le cas ou les propri�t�s de style sont directement misent dans la balise <div> mon code fonctionne bien.
D�s que je passe ces propri�t�s de style dans la balise html <style> le code ne fonctionne plus et par en boucle avec des erreurs d'analyse sur les propri�t�s top, weight,etc....
Je ne comprend pas pourquoi ?
Pourriez vous m'expliquer ce qui se passe ?

MERCI

L'exemple qui fonctionne

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
var TIMER;
function go(){
 var speed = 12;
 TIMER=setInterval("expandBox()", speed);
 
}
function expandBox(){
var t= document.getElementById("mbox");
 if(t) {
	if(parseInt(t.style.width)>200){clearInterval(TIMER);return false;}
    var step = 5;
    var cwidth = parseInt(t.style.width);
	var cheight = parseInt(t.style.height);
	if(cheight<=0){cheight=1;}
	if(cwidth<=0){cwidth=1;}
	var pwidth = parseInt((screen.availWidth/2)-(cwidth/2));
	var pheight = parseInt((screen.availHeight/3)-(cheight/2));
	t.style.left = pwidth+'px';
	t.style.top = pheight+'px';
	t.style.width = cwidth+step+'px';
	t.style.height = cheight+step+'px';
	t.style.border="solid";
	t.style.borderWidth="5px";
	t.style.borderColor="black";
   }
}
</script>
</head>
<body onclick="go();">
<div id="mbox" style="display:block;width:1px;height:1px;background-color:#D1D8D8;position:absolute;top:0px;left:0px;">
<div>
</body>
</html>

L'exemple qui boucle (seul le CSS � �t� d�plac� dans la balise <style>)

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#mbox{
display:block;
width:1px;
height:1px;
background-color:#D1D8D8;
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
var TIMER;
var BREAKER=0;
function go(){
 var speed = 12;
 TIMER=setInterval("expandBox()", speed);
 
}
function expandBox(){
var t= document.getElementById("mbox");
 if(t) {
	if(parseInt(t.style.width)>200){clearInterval(TIMER);return false;}
    var step = 5;
    var cwidth = parseInt(t.style.width);
	var cheight = parseInt(t.style.height);
	if(cheight<=0){cheight=1;}
	if(cwidth<=0){cwidth=1;}
	var pwidth = parseInt((screen.availWidth/2)-(cwidth/2));
	var pheight = parseInt((screen.availHeight/3)-(cheight/2));
	t.style.left = pwidth+'px';
	t.style.top = pheight+'px';
	t.style.width = cwidth+step+'px';
	t.style.height = cheight+step+'px';
	t.style.border="solid";
	t.style.borderWidth="5px";
	t.style.borderColor="black";
   }
  BREAKER++;
 if(BREAKER>200){clearInterval(TIMER);return false;}  
}
</script>
</head>
<body onclick="go();">
	<div id="mbox">
	<div>
</body>
</html>

**SpaceFrog** · 27/08/2010, 10h31

il faut soit passer par les offset quand c'est possible ou les getComputedStyle; mais l� encore certaines propri�t�s de styles sont hors de port�e pour certains navigateurs (border[...] pour ffx par ex.)

Soit tu laisses le style dans la balise ou tu l'applique dynamiquement sur le onload.

**SPACHFR** · 27/08/2010, 10h48

Merci pour cette r�ponse.

Une petit pr�cision.
Je n'arrive pas � comprendre pourquoi �a fonctionne pas.
Mon DIV existe, le CSS est d�clar�, et la fonction Javascript est ex�cut�e que lors du click sur le BODY de la page. Donc tout les �l�ments de la page sont bien charg� et connus.
En plus je viens de r�aliser qu'avec le DOCTYPE, mon code ne fonctionne pas sous IE, par contre si je le vire �a fonctionne (pour le premier exemple)

C'est juste un petit exercice perso je reste zen

**SpaceFrog** · 27/08/2010, 11h05

Je n'arrive pas � comprendre pourquoi �a fonctionne pas.

Oubli de developpement
bug
...

**SPACHFR** · 27/08/2010, 12h05

Bon, je vais suivre ton conseil (dynamiquement).
Pas grave, c'�tait juste un test pour me faire une Box perso avec un petit effet lors de l'ouverture. Le principe de l'effet fonctionne, je vais tenter de faire un truc propre et complet.
Je sais qu'il en existe d�j� pas mal, mais c'est de auto-formation et c'est le seul moyen de progresser.

Merci pour ton aide

JS ne reconnait pas le CSS non initialis� dans la balise?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager