La communauté ALL HTML c'est 60442 membres à ce jour dont 0 inscrits aujourd'hui et 5 depuis une semaine.

Table de CSS écrite en javascript

Photo de Deny 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

Photo de ddaix Commentaire publié le mercredi 28 juin 2006 à 17 h 19 par ddaix
A quoi ça peut servir ?
Photo de jesuisveronique 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!
Photo de Deny 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.
Photo de jesuisveronique 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!
Photo de telnes 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.

++
Photo de xaccrocheur 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.

Liens sponsorisés

ACCÉS COMMUNAUTÉ

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.