Changement de css avec javascript

Version imprimable

Voila j'ai un petit code qui m’embête :aie:

J'ai une liste dont je veux pouvoir changer le css si un paramètre particulier est passé dans l'url.

Je récupère les infos dans l'url et sa sa marche bien :P
Le code a appliquer je l'ai sortie directement de ma feuille CSS (mon erreur vient peut être de la :oops: )
Mais sa marche pas du tout.
Code:

1 2 3 4 5 6 7 8 9 10 var doc doc=document.location.href.split("/") //Si l'index quatre correspond a pr if (doc[4]=='pr'){ //Petit print pour le test ceci marche et s'affiche bien quand il faut document.write(doc[4]); //Changement du style de la balise li ayant comme id PR MAIS LA SA MARCHE PAS DU TOUT document.getElementById("PR").style.background='url(menu15bis.gif)'; }

20/10/2011, 14h49
SpaceFrog

essaye

Code:

//document.write(doc[4]);
20/10/2011, 14h49
Bovino

Code:

document.write(doc[4]);

:vomi:

Document.write() est à proscrire au maximum !
Sur un document fermé (ce qui semble être le cas de ton contexte d'utilisation), cette méthode réouvre le document (donc en le vidant) et écrit la valeur de ses paramètres dans celui qui vient d'être créé.
20/10/2011, 14h52
EIN-LESER

J'ai bien retiré le document.write(doc[4]); mais je ne peut toujours pas changer le style.

Il y a quelque-chose que j'ai du manquer ^^
20/10/2011, 14h56
Bovino

Code:

doc=document.location.href.split("/")

On peut voir l'URL sur laquelle tu fais ça ? :?
20/10/2011, 15h03
EIN-LESER

http://10.8.166.207/category/pr

C'est une URL un peux particulier car crée par django

Mais le split marche bien et me retourne bien ce que je veux.

Le soucis c'est que je n'arrive pas a modifier le style de les <li> apres.
20/10/2011, 15h08
Bovino

Code:

document.getElementById("PR").style.background='url(menu15bis.gif)';

L'image est bien dans le même répertoire que la page affichée ?
Sinon, montre-nous le code HTML associé à ta liste.
As-tu une erreur dans la console JavaScript ?
Si tu as Firebug, le changement de style apparait-il dans l'onglet DOM ?

Je n'ai malheureusement pas firebug non

L'image est bien dans le meme dossier que la page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<td VALIGN =TOP width="15%"><center>
								</br></br>
								<ul>									
									<li><a href="/">Toutes</a></li>
									<li id="PR"><a href="/category/pr" >PR</a></li>							
									<li><a href="/category/se-sf">SE/SF</a></li>
									<li><a href="/category/ee">EE</a></li>
									<li><a href="/category/Essais">Esssais</a></li>
									<li><a href="/category/tl">TL</a></li>
									<li><a href="/category/eg-lg-ev">EG/LG/EV</a></li>
									<li><a href="/category/oa">OA</a></li>
									<li><a href="/category/te">TE</a></li>
									<li><a href="/category/bat">Bat</a></li>
									<li><a href="/category/cdp-cep">CdP/Cep</a></li> 				
									<li><a href="/category/expl">Expl</a></li>
								</ul>
								</center>
							</td>

Ce que je cherche a faire en fait est de mettre une image a la place de la seconde <il> si le paramettre passe avec mon url == per

20/10/2011, 15h30
EIN-LESER
La console me dit :

Citation:

[15:27:05,651] document.getElementById("PR") is null

@ http://10.8.166.207/category/pr:76

C bizzare car je fais bien:
Code:

1 2 <li id="PR"><a href="/category/pr" >PR</a></li>

non au-temps pour moi le is nul est de ma faute je fessai la commande javascript trop tôt dans la page mais cela n’empêche pas que sa marche pas du tout :cry:

Le plus simple serait de vous montrer toute la page lol

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
{% extends "base2.html" %}
{% load rabidratings_extras %}
{% load comments %}
{% load visits_tags %}
{% block extra_js %}
{% endblock %}
{% block content %}
	<script type="text/javascript">
		animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
		animatedcollapse.ontoggle=function($, divobj, state){
		}
		animatedcollapse.init()
 
 
 
 
	</script>
 
	{% rating_header %}
	<div id="layout_body">
		<div id="main_wrapper_outer">
			<div id="main_wrapper_inner">
				<div class="center_wrapper">		
					<table width="100%">	
						<tr>
							<td VALIGN =TOP width="15%"><center>
								</br></br>
								<ul>									
									<li><a href="/">Toutes</a></li>
									<li id="PR"><a href="/category/pr" >PR</a></li>							
									<li><a href="/category/se-sf">SE/SF</a></li>
									<li><a href="/category/ee">EE</a></li>
									<li><a href="/category/Essais">Esssais</a></li>
									<li><a href="/category/tl">TL</a></li>
									<li><a href="/category/eg-lg-ev">EG/LG/EV</a></li>
									<li><a href="/category/oa">OA</a></li>
									<li><a href="/category/te">TE</a></li>
									<li><a href="/category/bat">Bat</a></li>
									<li><a href="/category/cdp-cep">CdP/Cep</a></li> 				
									<li><a href="/category/expl">Expl</a></li>
								</ul>
								</center>
							</td>
							<td width="10%">
							</td>
							<td width="90%">
									<strong>TOP 10 {{slug}} | <a href="/blog/category/{{slug}}">Plus details</strong></a></br></br>		
								<ul id="countrytabs" class="shadetabs">
									<li><a href="/derniers2/{{slug}}" rel="countrycontainer">Derniers Articles</a></li>
									<li><a href="/notes2/{{slug}}" rel="countrycontainer">Les mieux notes</a></li>
									<li><a href="/toppopularite2/{{slug}}" rel="countrycontainer" >Les + lus</a></li>
									<li><a href="/topprix2/{{slug}}" rel="countrycontainer" >Les + chers</a></li>
									<li><a href="/topsecurite2/{{slug}}" rel="countrycontainer">SECURITE</a></li>
                                    <li><a href="/commentaire/" rel="countrycontainer">Commentaire</a></li>
								</ul>
								<div id="countrydivcontainer" style="border:1px solid gray; width:650px; margin-bottom: 1em; padding: 10px">	
 
								</div>
 
								</td>	
							<script type="text/javascript">
								var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
								countries.setpersist(true)
								countries.setselectedClassTarget("link") //"link" or "linkparent"
								countries.init()
							</script>		
 
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
 
		var doc
		doc=document.location.href.split("/")
		//Si l'index quatre correspond a pr
		if (doc[4]=='pr'){
		//Petit print pour le test  ceci marche et s'affiche bien quand il faut
		//document.write(doc[4]);	
		//Changement du style de la balise li ayant comme id PR   MAIS LA SA MARCHE PAS DU TOUT
 
		document.getElementById("PR").style.background='url(menu15.gif)';
		}
 
 
	</script>
{% endblock %}

Si quelqun a une idee je lui en serait gree d'avance :calim2: