ALL HTML - Table de CSS écrite en javascript

retour

Table de CSS écrite en javascript

Article publié le mercredi 21 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>

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le mercredi 28 juin 2006 à 17 h 19 par ddaix: A quoi ça peut servir ?
Commentaire publié le mercredi 28 juin 2006 à 18 h 01 par jesuisveronique: c'est un peu pour traduire que tu as fait ça?
Pour qu'on se repère ?
J'aimerai bien avoir ce genre de chose car souvent je modifie mes css au pif et je visualise car je ne comprend pas bien l'anglais.
Donc si c'est ça le but c'est une bonne idée.
Il faudrait avoir une sorte de feuille de css avec des rpère en français,par exemple là c'est pour faire cette action....ça me gagnerait du temps!
Commentaire publié le jeudi 29 juin 2006 à 10 h 37 par Deny: C'est vrai que de cette façon l'on pourrait réussir à les changer de place, les lire et les remettre à leur place, par exemple, mais tout ça est faisable en DHTML.
L'intérêt est donc surtout ici de récupérer des variables comme la définition d'écran, d'en calculer des pourcentage si l'on veux, et de les entrer dans un table de css au lieu de les écrire en javascript dans le body.
C'est ici appliqué à des id, donc à un seul élément, mais ça peut se faire à des tags en concernant plusieurs.
On peut probablement trouver d'autres calculs possibles.
Commentaire publié le jeudi 29 juin 2006 à 13 h 55 par jesuisveronique: je suis trés visuel mais pour ce qui est de me servir de htlm ...j'aimerai mieux avoir une possibilité visuel de le faire comme dans front page par exemple...je me sert de topstyle lite...il y a un aperçu...mais je perd un temps fou a trouver l'emplacement de la colonne et cela...m'ennerve!
Commentaire publié le jeudi 29 juin 2006 à 16 h 56 par telnes: pourquoi ne pas utiliser une classe javascripte pour faire les actions !! en appellant les méthodes.

++
Commentaire publié le samedi 02 décembre 2006 à 16 h 55 par xaccrocheur: Disons que l'intéret est surtout de récupérer les valeurs d'un script dans une CSS et à ce titre, c'est assez peu satisfasant... Il doit y avoir une autre méthode pour, typiquement comme ici, passer à une CSS (externe! C'est ça l'idée des CSS !) la hauteur et la largeur de l'écran, uber-utile pour du code portable..?

Commenter cette publication

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Forums de discussions associés

Discutez et échangez sur ce thème dans notre forum XHTML - HTML - CSS.

01/09/2010 à 17 h 49 ecoles en france qui font de la formation sur le web (0 réponse)
25/08/2010 à 11 h 36 Les bases du HTML (débutant) (1 réponse)
23/08/2010 à 18 h 48 balise de creation de menu (5 réponses)
20/08/2010 à 08 h 30 Aide Html (0 réponse)
15/08/2010 à 21 h 05 Problème d'affichage au bout de quelques secondes (1 réponse)

all html : Le portail des webmaster

Table de CSS écrite en javascript

VOS COMMENTAIRES ...

Forums de discussions associés

Liens sponsorisés