begin process at 2012 05 28 13:40:07
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > ECRIRE DU CSS EN JAVASCRIPT

ECRIRE DU CSS EN JAVASCRIPT


 Information sur la source

Note :
1 / 10 - par 1 personne
1,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Initié Date de création :21/05/2003 Date de mise à jour :21/05/2003 10:37:26 Vu :6 076

Auteur : Deny

Ecrire un message privé
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

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

  • <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>
<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 &lt;td class="c1" etc... bien entendu

a+


 Sources du même auteur

DHTML - MANIP CSS
OUVERTURE POPUP À URL ALÉATOIRE
Source avec Zip 96 SITES RÉPERTORIÉS : HTML, CSS, DHTML, JAVA, JAVASCRIPT, P...
BROWSER SNIFFER (RENIFLEUR)
Source avec Zip DHTML SCROLLTOP

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Commentaires et avis

Commentaire de mediagirl le 16/12/2004 05:15: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!!!

Commentaire de smomoch le 02/06/2006 17:25:36

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!!!

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,484 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales