1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Ecrire du css en javascript

Ecrire du css en javascript

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 003 fois - Téléchargée 30 fois

Commenter

Contenu du snippet

Vous créez un tableau...
Vous désirez avoir ses largeurs de colonnes définies en % selon la définition de l'écran. On les calcule en javascript, on definit les classes en css. Mais le css ne prend pas les variables du javascript.
On entre donc le css en javascript !
La suite n'est que le début d'un html, à vous le reste...
Notez que le css s'enchaine, cascading

Source / Exemple : 


<script type="text/javascript" LANGUAGE="JavaScript">
largfen = screen.width;
var largc1 = largfen * 0.15;
var largc2 = largfen * 0.70;
var largc3 = largfen * 0.30;
var largc4 = largfen * 0.40;
var largc5 = largfen * 0.15;
</script>
<style type="text/css">
p.bodT
	{margin:10px 5px 10px 5px; padding: 12px 5px 12px 15px; 
	font-family: "Arial", sans-serif;font-size:12px;font-weight:700;text-align: left; vertical-align: middle;
	border-width: 2px; border-style: dashed; border-color: #823389; color:#823389;background-color: #FFDB00;
	}
.bod
	{margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px;
	font-family: "Arial", sans-serif;
	font-size:12px;color:#006C80;font-weight:300;text-align: justify;
	}
td.c5 {margin: 0px; padding: 2px; vertical-align: top;}
</style>
<script type="text/JavaScript">
document.write("<style type='text/css'>");
document.write("table.tt {width:"+ largfen +"; }");
document.write("td.c1 {width:"+ largc1 +";margin: 0px; padding: 5px; vertical-align: top;}");
document.write("td.c2 {width:"+ largc2 +";margin: 0px; padding: 5px; vertical-align: top;}");
document.write("td.c3 {width:"+ largc3 +";margin: 0px; padding: 5px; vertical-align: middle;}");
document.write("td.c4 {width:"+ largc4 +";margin: 0px; padding: 5px; vertical-align: middle;}");
document.write("</style>");
</script>

Conclusion :


la suite par <td class="c1" etc... bien entendu

a+

A voir également

Ajouter un commentaire Commentaires
smomoch
Messages postés
2
Date d'inscription
mercredi 31 mai 2006
Statut
Membre
Dernière intervention
2 juin 2006
2 juin 2006 à 17:25
Je suis un peu mêlé avec ce code et je ne comprend pas. J'essaie de faire fonctionné ce code depuis quelques minutes et sans succès...

Est ce qu'il serait possible de mettre plus d'explications comme le code doit être insérer ou et comment dois-je faire le lien avec ma page principale???

Merci!!!
cs_mediagirl
Messages postés
2
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
16 décembre 2004
16 déc. 2004 à 05:15
Je suis un peu mêlé avec ce code et je ne comprend pas. J'essaie de faire fonctionné ce code depuis quelques minutes et sans succès...

Est ce qu'il serait possible de mettre plus d'explications comme le code doit être insérer ou et comment dois-je faire le lien avec ma page principale???

Merci!!!
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Deny)