Changement de css avec javascript

**EIN-LESER** · 20/10/2011, 14h42

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 :

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

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** · 20/10/2011, 14h49

essaye

Code :

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

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

**Bovino** · 20/10/2011, 14h49

Code :

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

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** · 20/10/2011, 14h52

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** · 20/10/2011, 14h56

Code :

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

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

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

**EIN-LESER** · 20/10/2011, 15h03

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** · 20/10/2011, 15h08

Code :

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

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** · 20/10/2011, 15h17

Je n'ai malheureusement pas firebug non

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

Code :

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

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** · 20/10/2011, 15h30

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 :

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

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

**EIN-LESER** · 20/10/2011, 15h44

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 :

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

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

Changement de css avec javascript

JavaScript

Discussions similaires

Partager

Partager