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