Changement de css avec javascript [Résolu]

[EIN-LESER]

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

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
Le code a appliquer je l'ai sortie directement de ma feuille CSS (mon erreur vient peut être de la )
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)';
		}

[SpaceFrog]

essaye

Code :

//document.write(doc[4]);

[Bovino]

Code :

document.write(doc[4]);

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éé.

[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 ^^

[Bovino]

Code :

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

On peut voir l'URL sur laquelle tu fais ça ?

[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.

[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 ?

[EIN-LESER]

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

[EIN-LESER]

La console me dit :

[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>

[EIN-LESER]

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

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