Modifier propriétés feuille de style

Salut !

Je souhaiterais modifier ma feuille de style selon la résolution du navigateur. J'ai mis :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<script type="text/javascript"> function Redim() { var wid=screen.width; var hei=screen.height; alert (wid); if ((wid>=800) & (wid<1024)) { } if ((wid>=1024) & (wid<1280)) { } if ((wid>=1280)) { alert ("Résolution supérieure ou égale à 1280px."); document.getElementById('block').style.width='10px'; } } </script> <a href="javascript:Redim();">ici</a> <div id="block">test</div>

---

Ca fonctionne mais le problème est que j'aimerais que cette modification se fasse au chargement de la page et non pas lorsque je clique sur le lien...

Merci d'avance...

Ca fonctionne avec un div tout simple mais j'ai un problème avec mon menu. En fait, j'essaie d'agrandir ou de diminuer la taille de chaque "case" du menu (par exemple "accueil", "contact"...) pour que la longueur globale de la barre de menu soit aussi large que la bannière selon la résolution.

J'ai mis :

Code:

---

1 2 3 4 5 6

if ((wid>=1280)) { document.getElementById('block').style.width='10px'; document.getElementByTagName('menu a').style.width='16em'; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

#menu a /* Contenu des listes */ { display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* aucune marge intérieure */ background : #ccc; /* couleur de fond */ color : #fff; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 19em; /* largeur */ height : 25px; font-size: 1em; }

---

Le problème est que dans le code HTML le div se nomme "menu" et le div impliqué est "menu" avec l'attribut "a", je sais pas comment faire...

Quelqu'un peut m'aider svp ?

Merci d'avance...

Personne connait une solution ?

Comment faire pour atteindre :

Code:

---

1 2	#menu li ul

---

Code:

---

1 2	document.getElementById("menu").getElementsByTagName("LI").getElementsByTagName("UL")

---

Comme ça ?

Personne sait comment modifier via javascript les propriétés css des balies UL et LI ?

Quelqu'un peut m'aider svp ?

Merci d'avance...

Citation:

---

Envoyé par Jiraiya42

Code:

---

1 2	document.getElementById("menu").getElementsByTagName("LI").getElementsByTagName("UL")

---

Comme ça ?

---

Il faut faire une boucle. document.getElementById("menu").getElementsByTagName("LI") ça va te renvoyer une liste d'élements, il ne te reste plus qu'à boucler sur chacun des élements en refaisant un getElementsByTagName("UL") (qui te renverra également une liste).

Citation:

---

Envoyé par denisC

Il faut faire une boucle. document.getElementById("menu").getElementsByTagName("LI") ça va te renvoyer une liste d'élements, il ne te reste plus qu'à boucler sur chacun des élements en refaisant un getElementsByTagName("UL") (qui te renverra également une liste).

---

Merci pour ta réponse :D

Attends, donc je fais une boucle sur le menu et les ul et dans cette boucle je fais une boucle sur les li c'est ça ?

Code:

---

1 2 3 4 5 6 7 8

while (document.getElementById("menu").getElementsByTagName("UL")) { while (document.getElementById("menu").getElementsByTagName("LI")) { document.getElementById("menu").document.getElementById("LI").style.width='18.7em'; } }

---

Quelque chose comme ça ?

Citation:

---

Envoyé par Jiraiya42

Quelque chose comme ça ?

---

:aie: Vraiment vaguement comme ça. Il faut nommer un peu tes variables quand même, comment veux-tu qu'il devine de quoi tu parles 8O

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var mesUls = document.getElementById("menu").getElementsByTagName("UL"); for (var i=0; i<mesUls.length; i++) { var monUl = mesUls[i]; mesLis = monUl.getElementsByTagName("LI"); for (var j=0; j<mesLis.length; j++) { with (mesLis[j]) { style.width='18.7em'; } } }

---

Ton code final sera certainement plus proche de ça....

Citation:

---

Envoyé par denisC

:aie: Vraiment vaguement comme ça. Il faut nommer un peu tes variables quand même, comment veux-tu qu'il devine de quoi tu parles 8O

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var mesUls = document.getElementById("menu").getElementsByTagName("UL"); for (var i=0; i<mesUls.length; i++) { var monUl = mesUls[i]; mesLis = monUl.getElementsByTagName("LI"); for (var j=0; j<mesLis.length; j++) { with (mesLis[j]) { style.width='18.7em'; } } }

---

Ton code final sera certainement plus proche de ça....

---

Merki pour ta réponse

Oui je sais que mon code n'est pas du tout bon mais je débute. J'ai tenté d'adapter ton code en incluant une modif des style des balises A j'ai mis ça :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var mesUls = document.getElementById("menu").getElementsByTagName("UL"); for (var i=0; i<mesUls.length; i++) { var monUl = mesUls[i]; mesLis = monUl.getElementsByTagName("LI"); for (var j=0; j<mesLis.length; j++) { with (mesLis[j]) { style.width='30em'; } var mesAs = mesLIs[j]; mesAs = mesAs.getElementsByTagName("A"); for (var k=0; j<mesAs.length; j++) { with (mesAs[k]) { style.width='30em'; } } } }

---

Mais il ne fonctionne pas, un avis svp ?

Citation:

---

Envoyé par Jiraiya42

var mesAs = mesLis[j];

---

Javascript est tres sensible à la casse....

Citation:

---

Envoyé par denisC

Javascript est tres sensible à la casse....

---

à ce propos :

Code:

---

1 2 3 4 5

getElementsByTagName("A"); => getElementsByTagName("a"); getElementsByTagName("LI"); => getElementsByTagName("li"); getElementsByTagName("LI"); => getElementsByTagName("ul"); etc...

---

même si le résulat est le même, il préférable d'écrire l'argument en minuscules (d'ailleurs les balises dans ta page HTML doivent être en minuscules) ;)

de plus

Code:

---

1 2 3 4 5

with (mesLis[j]) { style.width='30em'; }

---

Javascript connait "with" ? J'ai un sérieux doute (le mot clef existe dans d'autres langages mais en Javascript je n'en suis pas sûr) :?

Citation:

---

Envoyé par denisC

Javascript est tres sensible à la casse....

---

Merci pour ta réponse.

Ah oui très juste, ça m'avait échappé :) De plus, dans ma dernière boucle avec le "k" j'avais mal incrémenté le k.

J'ai mis ça :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

// On définie la largeur des cellules var width_A = '18.6em';   // On récupère le nombre de LI contenu dans le menu var Lis = document.getElementById("menu").getElementsByTagName("LI"); for (var y=0; y<Lis.length; y++) { var As = Lis[y]; // On récupère le nombre de A contenu dans chaque LI... As = As.getElementsByTagName("A"); for (var z=0; z<As.length; z++) { with (As[z]) { //... et pour chacun, on modifie la taille des A style.width=width_A; } } }   // On récupère le nombre de UL contenu dans le menu var mesUls = document.getElementById("menu").getElementsByTagName("UL"); for (var i=0; i<mesUls.length; i++) { var monUl = mesUls[i]; // On récupère le nombre de LI contenu dans chaque UL mesLis = monUl.getElementsByTagName("LI"); for (var j=0; j<mesLis.length; j++) { var mesAs = mesLis[j]; // On récupère le nombre de A contenu dans chaque LI... mesAs = mesAs.getElementsByTagName("A"); for (var k=0; k<mesAs.length; k++) { with (mesAs[k]) { //... et pour chacun, on modifie la taille des A style.width=width_A; } } } }

---

J'ai un problème avec ma variable "width_A"... J'aimerais que les deux "style.width" reçoivent la valeur de la variable "width_A" mais étant plus habitué au PHP j'ai du mal à faire quelque chose de "grammaticalement correct"

Quelqu'un peut m'aider svp ?

Merci d'avance...

EDIT : Problème résolu, je me compliquais la vie pour rien :) Le code est édité et terminé au cas où si ça servait à d'autres.

Merci beaucoup pour l'aide de tous ceux qui ont participé :mrgreen:

Bonjour,

Citation:

---

Envoyé par Auteur

Javascript connait "with" ?

---

Oui.

A+