JS ne reconnait pas le CSS non initialisé dans la balise?
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:
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:
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> |
