18067 sujets

Questions générales et questions de débutants

Variable javascript dans un css [Résolu]

Bonjour,

J'ai un menu (made in alsacreations Smiley cligne )

le css:

ul {
list-style-type: none;
margin: 0;
padding: 0;
position:absolute;
top:100px;
left:30px;
}
.menu a{
display: block;
height: 20px;
width: 250px;
text-decoration: none;
color: #000;
text-indent: 20px;
background-image:url(p1/puce0.gif);
background-position: left center;
background-repeat: no-repeat;
}
.menu a:hover{
background-position: left center;
}


HTML

<ul class="menu">
	<li><a href="">Menu 1</a></li>
	<li><a href="">Menu 2</a></li>
	<li><a href="">Menu 3</a></li>
	<li><a href="">Menu 4</a></li>
</ul>


J'aimerais que le TOP (css) soit par défaut à 100px et avec chaque lien affecter une autre valeur au TOP(css) exemple (onClick="top=80;") Smiley biggol

Quelqu'un a une piste pour moi sans Php de préférence

Merci
Modifié par lepotier (11 Jan 2007 - 08:59)
j'ai pas très bien compris ce qu'était le TOP mais je peux te proposer une piste pour accéder au style des éléments :


function changeTOP(taille)
{
     var elem=document.getElementById("top");
     elem.style.width=taille+"px"; // ou height
}


Ensuite tu fais onclick="javascript:changeTOP(80);" sur le lien correspondant
Modifié par predator93 (10 Jan 2007 - 00:45)
Merci pour ta réponse, en fait TOP n'existe pas c'était pour être clair (mort de rire).

Je ne sais pas si je peux réadapter ta fonction

function changeTOP(taille)

{

     var elem=document.getElementById("top");

     elem.style.width=taille+"px"; // ou height

}

comme ça 
elem.style.[b]top[/b]=taille+"px"; // ou height


Tu vois je voudrais qu'avec evenements onClick la position de mon menu change

Merci encore de ton aide Smiley smile
Modifié par lepotier (10 Jan 2007 - 09:13)
Salut,

Tu ne peux pas modifier la fonction qui t'a été donnée comme tu l'as fait, car les deux lignes sont nécessaires :
- document.getElementById("top"); cible l'élément dont l'identifiant (id) est top;
- elem.style.width=taille+"px"; cible la propriété à modifier.

Si vraiment tu veux optimiser, tu peux faire comme ceci : 
     document.getElementById([i]ton identifiant[/i]).style.top='80px';
Donc je peu faire ceci:

<ul id=link class="menu">
	<li><a href="">Menu 1</a></li>
	<li><a href="">Menu 2</a></li>
	<li><a href="">Menu 3</a></li>
	<li><a href="">Menu 4</a></li>
</ul>

function changeTOP(taille)
{
     document.getElementById("link").style.top=taille+'px';
}



Merci pour votre aide
Smiley cligne
Modifié par lepotier (10 Jan 2007 - 11:20)
Sujet clos
Aller à