<html>
<head>
<script type="text/javascript">
/* ----- taille écran ------------ */
lrgec = screen.availWidth;
htec = screen.availHeight;
id0 = "div2";
id1 = "div3";
id = id0;
/* ----------- taille de la div ------- */
lrg0 = 600;
ht0 = 350;
/* ------------- position ------------ */
poshrt = (lrgec - lrg0)/2;
/* ------------------ Je remonte ci-dessous la div de 50 pour la mettre au milieu, sinon c'est correct en fullscreen --------------*/
posvrt = (htec - ht0)/2 -50;
/*------------------------- écriture de la table --------------------------- */
document.write("<style id='st0' type='text/css'>");
/* -------------------- on écrit les variables js par "+ variable +"--------------------*/
document.write("#div0 {position:absolute; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
/* --------je modifie les valeurs des positions et tailles ----------*/
posvrt= posvrt+30;
ht0 = ht0-60;
poshrt = poshrt+30;
lrg0 = lrg0-60;
document.write("#div1 {position:absolute; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
/*---------------- div2 var id0 en relative affichée----------------------------*/
posvrt= +20;
ht0 = ht0-80;
poshrt = +25;
lrg0 = lrg0-60;
document.write("#"+id0+" {position:relative; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
/*---------------- div3 var id1 en relative non affichée----------------------------*/
posvrt= +60;
ht0 = ht0+80;
poshrt = +55;
lrg0 = lrg0+60;
document.write("#"+id1+" {position:relative; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
document.write("</style>");
</script>
</head>
<body>
<div id="div0">Exemple de div paramètrée en table de css écrite en javascript.</div>
<div id="div1">Exemple de 2ème div dont les positions ont été augmentées de 30px et les dimentions diminuées de 60px.
<div id="div2" onMouseOver="this.id='div3';" onMouseOut="this.id='div2';">
Exemple de 3ème div dont les positions ont été augmentées, en relative, avec une id en variable,
</div>
</div>
</body>
</html>