Discussion :

[vraipolite]

Bonjour,

Voilà ce que j'essaie de faire : modifier des styles dynamiquement avec javascript. Quand j'utilise la méthode suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("monTruc").style.backgroundColor="#FF6600";

ça marche au poil Par contre (évidement qu'il y a un par contre ) si je veux modifier la couleur de mes liens, en utilisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getElementByTagName.style

là ça ne fonctionne pas. Auriez vous une idée de comment s'y prendre ? est ce possible au moins ? même pb pour les classes j'ai l'impression que style ne marche qu'avec les élements qui ont un Id

[SpaceFrog]

getElementsByTagName[indice].style

getElementsByTagName retourne une collection ...


par contre tu peux passer par le css ...

[vraipolite]

que veux tu dire par passer par le css stp ? récupérer ma feuille de style, la modifier, et raffraichir la page ? (possible en js ?)

[SpaceFrog]

non avoir deux style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.style1 {color:red;}
.style2 {color:green;}

et modifier dynamiquemnt le className d'un élément

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var monobjet=document.getElementsByTagName('div')[0].className='style2'

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="mondiv" class="style1">...

[vraipolite]

donc, il est malheureusement impossible de modifier le style d'une classe ou de lien par exemple qui n'ont pas d'id ? à part avec la méthode de SpaceFrog, mais je ne peux pas l'appliquer dans mon cas. ça m'étonne, mais j'ai beau chercher je trouve pas..faites moi part de vos idées si vous en avez svp

[SpaceFrog]

si le tout est de réussir à chopper l'objet ...

as tu un exemple de code html avec l'objet à modifier ...

[vraipolite]

oui bien sûr :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div class="menu" id="menuLien">
<div class="menuTitre"><h2>Liens utiles</h2></div>
<div class="menuContenu"><ul>
<li><a href="http://<a href="http://www.developpez.com">Club" target="_blank">www.developpez.com">Club</a> des développeurs ;)</a></li>
</ul>
</div></div>

et le genre de trucs que je cherche à faire c'est modifier le background de la class menuContenu et de changer la couleur des liens.(dans cet exemple pour le background je pourrais utiliser l'id menuLien, mais c'est pas partout comme ça)

[SpaceFrog]

et sur quel évènement souhaites tu changer le style ?

[vraipolite]

le click d'un bouton par exemple, ça n'a pas vraiment d'importance en fait. en tout cas pour mes tests, je le fais sur un onClick qui appelle une fonction

[SpaceFrog]

ben si c'est super important parceque ça aurait été sur le click de l'objet ça aurait été fingers in the nose !!

a mon avis tu va avoir un gros problème si la structure n'est pas constante, si ty n'as pas un schéma qui se répète ...
et tu ne peux pas mette d'id dans tes divs?

[vraipolite]

si ça avait été un click sur l'objet, ça change quoi,je vois pas trop où tu veux en venir ?

La plupart des divs ont un id (pour ceux qui n'en ont pas, je peux pas en rajouter), mais arrête moi si je dis une connerie (ce que j'espère) : si je veux foutre mes liens en orange à l'intérieur d'un div qui a un id en javascript, je peux pas, sauf si mon lien avait un Id

[SpaceFrog]

ben si c'est le click sur l'objet même:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="this.style.color='red'"

et on n'en parle plus ...
mais là sur un bouton pour mettre la main sur l'objet sans id et sans struture répétitive ...

avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName('div')[i].style.color='red'

à condition de connaitre le numéro ordinal i du div dans le flux de la page

[vraipolite]

Pourquoi ceci ne marche pas stp ?:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
for(i=0;i<getElementsByTagName('a').length;i++){
window.frames["petite"].document.getElementsByTagName('a')[i].style.color='red';
}

y a un truc que j'ai pas du pigé.
parce que je me disais par exemple, pour colorier les liens d'un div(en admettant que j'ai l'id), je récupère tous ses enfants [ça je sais pas encore comment] et si le gamin est un lien, ben je le coloris, comme ça je peux colorier mes liens sans connaître leurs id
je sais pas si qqun me suit

[vraipolite]

aaaah mais je viens de trouver une fonctiontrès interessante là
on me l'avait caché putain. cssRules ! faut que j'explore tout ça, mais ça m'a l'air over sympa pour ce que je cherche à faire.

[SpaceFrog]

mouaip, mais je ne veux pas te décevoir ...le souci n'est aps d'aceder aux cssrules c'est a dire au style, mais à l'element ...

a moins que tu ais un style dédié à cet élément ...

[vraipolite]

Ben ce que je cherche à faire à court terme (très court terme) c'est de changer la couleur de mes liens qui ont un style définit, et les H2. j'ai pas encore essayé CSSrules, j'espère que ça suffira, mais c'est vrai que si y a des éléments qui n'ont pas de style, j vais être ds la merde

[javatwister]

Pourquoi ceci ne marche pas stp ?:

parce que tu oublies de notifier le noeud parsé: en l'occurence, c'est assez important puisqu'il s'agit de document

[vraipolite]

tu veux dire dans les conditions de la boucle for ? j'ai pas le source sous les yeux là pour vérifier, mais si tu parles du getElementsByTag du for(et que j'ai bien compris ce que tu m'as dis ), je pense l'avoir corrigé. mais ça ne marche toujours pas

[javatwister]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for(i=0;i<document.getElementsByTagName('a').length;i++){ 
window.frames["petite"].document.getElementsByTagName('a')[i].style.color='red'; 
}

ceci fonctionnera forcément si le frame nommé "petite" existe;

[vraipolite]

effectivement ça marche, j'avais oublié le window.frame[].doc quand j'avais testé