all html : Le portail des webmaster
La communauté ALL HTML c'est 58666 membres à ce jour dont 0 inscrits aujourd'hui et 38 depuis une semaine.
Cet article est actuellement publié sur le site.
Article publié le jeudi 22 juin 2006 par Deny.
Cet article est classé dans les catégories « CSS »
Pour quoi faire? Le js permet d'introduire des données calculées dans une table. On peut s'en servir à des fin diverses.
<html>
<head>
<script type="text/javascript">
/* ----- taille écran ------------ */
lrgec = screen.availWidth;
htec = screen.availHeight;
/* ----------- 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;}");
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 position ont été augmentées de 30px et les dimentions diminuées de 60px.</div>
</body>
</html>