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