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