G�n�rer du css avec du js

bonjour,

je recherche un moyen de g�n�rer du code css avec du code js, le d�clenchement de ce code doit s'effectuer si la larguer de la de la fen�tre est inf�rieur a 400

Code:

---

1 2 3 4

<p <?php if($besoinCSS==1){ echo'<script type="text/javascript">                    var largeur_fenetre = $(window).width();                    if(largeur_fenetre<400){document.write(style=" margin-top: 40px;"}                </script>';})?> >

---

je c'est que le code c'est pas.

regarde plutot du cot� de "media queries"

si j'ai bien compris le code qui me faut:

Code:

---

1 2 3 4 5

@media screen and (min-width: 400px) { #marge40px { magin-top:10px; } }

---

Code:

---

<p <?php if($besoinCSS==1){ echo'id="marge40px"';}?> >

---

mais j'ai pas bien compris comment utiliser le code media queries, c'est une librairie??, car je ne suis pas arriver a le faire fonctionner

Code:

---

.marge40px

---

Code:

---

echo'id="marge40px';

---

Rien ne te choque ? :roll:

non rien me choque

Tu ne connais pas la diff�rence entre un id et une class :calim2:

Code:

---

1 2 3 4 5 6 7 8

if (window.matchMedia("(min-width: 600px)").matches) { /* La largeur minimum de l'affichage est 600 px inclus */ } else { /* L'affichage est inférieur à 600px de large */ document.getElementById('marge40px').style.maginTop='400px'; } } }

---

je pence que j'ai un probl�me sur la s�lection de l'�l�ment
teste aussi avec #marge40px

Citation:

---

je pence que j'ai un probl�me sur la s�lection de l'�l�ment

---

Ah... moi j'aurais plut�t dit que la propri�t� maginTop est mal �crite... :roll:

non elle est bien �cris car margin-top ne fonction par car j'ai lue que le '-' n'est pas supporter et il faut le remplacer par marginTop

Citation:

---

Maintenant, une petite question pour vous : comment acc�de-t-on � une propri�t� CSS qui poss�de un nom compos� ? En Javascript, les tirets sont interdits dans les noms des propri�t�s, ce qui fait que ce code ne fonctionne pas :

Code:

---

element.style.background-color = 'blue'; // Ce code ne fonctionne pas, les tirets sont interdits

---

La solution est simple : supprimer les tirets et chaque mot suivant normalement un tiret voit sa premi�re lettre devenir une majuscule. Ainsi, notre code pr�c�dent doit s'�crire de la mani�re suivante pour fonctionner correctement :

Code:

---

element.style.backgroundColor = 'blue'; // Après avoir supprimé le tiret et ajouté une majuscule au deuxième mot, le code fonctionne !

---

---

Citation:

---

Envoy� par bjo393

non elle est bien �cris car margin-top ne fonction par car j'ai lue que le '-' n'est pas supporter et il faut le remplacer par marginTop

---

Ce qui est un peu diff�rent de

Citation:

---

Code:

---

document.getElementById('marge40px').style.='400px';

---

---

Quant � ce genre de d�bogage, il devrait �tre fait et v�rifi� avant de poster.

autant pour moi,
mais cela ne viens pas de la dans mon code je l'avais bien �cris

Citation:

---

Envoy� par bjo393

Code:

---

1 2 3 4 5

@media screen and (min-width: 400px) { #marge40px { magin-top:10px; } }

---

---

Ah... :whistle:

de toute fa�on ces lignes n�existe plus

Citation:

---

Envoy� par Bovino

Ah... :whistle:

---

Citation:

---

Code:

---

1 2 3 4

<p <?php if($besoinCSS==1){ echo'<script type="text/javascript">                    var largeur_fenetre = $(window).width();                    if(largeur_fenetre<400){document.write(style="margin-top: 40px;"}                </script>';})?> >

---

---

Bonjour,

As-tu regard� la console d'erreurs Javascript ? Parce que l� c'est bourr� de fautes de syntaxe. Il y a une parenth�se fermante mal plac�e, des guillemets pour encadrer le param�tre de document.write...

Prends le temps de te relire attentivement, �a ira mieux. ;)

j'avoue ne rien comprendre � cette discussion.
pour moi une simple feuille CSS statique est largement suffisante.

le pseudo classe assurant 90% du besoin pour le reste un simple ajout ou retrait d'une classe css sur un objet et le tour est jou�.

bref je ne vois aucuns cas o� g�n�rer du css soit utile.

A+JYT

Salut, je suis de l'avis de sekaijin ...
Par contre si j'aurais un conseil a te donner pour adapter des �l�ments d'une page en javascript :

Code:

---

1 2 3 4 5

var largeur_fenetre = $(window).width(); if(largeur_fenetre<400){ document.getElementById('ton_id').style.marginTop='valeur_px'; }

---

^ Ce code est plus fonctionnel que ton ancien :ccool:
Bonne continuation :D