Changer le style en JavaScript [besoin d'aide]

Version imprimable

Bonjour,

J'aimerai pouvoir enlever le border-bottom de mon Titre de menu qd j'ai dérouler son sous menu.

Voilà mon code HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
		<div class="top_menu" id="left_header">
			<!--<img src="style/images/style1/pro5.jpg">-->
			<dl>
				<dt onMouseOver="javascript:montre('smenu6');"><a href="#"><span id="smenu6a">L'entreprise</span></a></dt>
				<dd id="smenu6">
					<ul>
						<li><a href="#">Présentation</a></li>
						<li><a href="#">Nous Contacter</a></li>
						<li><a href="#">Recrutement</a></li>
					</ul>
				</dd>
			</dl>
		</div>

donc là j'ai pas mis tout mon code HTML juste un bout.

Voilà mon code JavaScript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (id == 'close')
{
	for (var i = 1; i<=7; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
}
else
{
var d = document.getElementById(id);
var id_dt = id +'a';
var da = document.getElementById(id_dt);
	for (var i = 1; i<=7; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		if (document.getElementById('smenu'+i+'a')) {document.getElementById('smenu'+i+'a').style.background='#FFFFFF';}
	}
if (d) {d.style.display='block';}
if (da) {da.style.background='#FF00FF';}

Voilà donc en faite là j'ai laisser style.background dans mon javascript qui marche tres bien mais moi en faite j'aimerai que çà me face border-bottom='0';

qd je fait çà çà me fait une erreur.

13/09/2005, 14h26
Debernad

Car le nom de la variable pour ton style est "borderBottom" et non "border-bottom" ...
Pour les nom de variables de style CSS, tous les paramétres contenant un mot composé séparé par un tiret dans leur nom, sont transformés en un seul mot dont la premiére lettre du deuxiéme terme est en majuscule ...
13/09/2005, 14h44
maximenet

Merci pour ton conseil je ne le savais pas.

bon j'ai remplacer la propriété de style donc maintenant çà me fait plus d'erreur mais çà ne me fait rien du tout.

j'arrive pas a résoudre mon pb.
13/09/2005, 14h49
maximenet

en faite je crois que mon erreur viens du faite qu'on ne peut pas poser de border a id="smenu6a"

Qu'est ce qu'il faut modifier dans le style CSS pour pouvoir attribuer des border a un id ?

Salut,

Code:

1
2
3
<type_de_balise>#<id_de_la_balise> {
    <style_que_tu_veux>
}

dans ton cas :

Code:

1
2
3
span#smenu6a {
    border-bottom: none;
}

@+
Jorus

13/09/2005, 15h07
maximenet

Euhh Jorus jcrois que c'est pas la réponse a mon probleme ou alors jsuis carément a l'ouest 8O
13/09/2005, 15h34
Jorus

Citation:

Envoyé par maximenet

Euhh Jorus jcrois que c'est pas la réponse a mon probleme ou alors jsuis carément a l'ouest 8O

:lol:
yop, je crois que j'ai pigé maintenant. Tu veux le faire en javascript... :lol:
Désolé...
Essaye cette propriété :arrow:

Code:

.style.borderBottomStyle

Je m'éloigne encore là ?
13/09/2005, 15h37
maximenet

non mais en faite comme je l'ai dit un peut plus haut, je ne peut pas mettre de mordure sur mon id="smenu6a"

meme qd je le fait manuellement dans ma feuille de style çà me le prend pas en compte.
13/09/2005, 15h48
Jorus

qu'as-tu mis dans ta feuille de style ?
13/09/2005, 15h53
maximenet

Bon la jtravail sur une autre piste, si j'arrive a faire qlq chose de correct je reviens donner ma soluce

Il faut faire cela pour afficher ton bord et l'effacer :

Code:

1
2
3
4
5
 
// pour afficher le bord de ton menu
menu.style.borderBottom="solid black 3";
// pour effacer le bord de ton menu
menu.style.borderBottom="solid black 0";

Bon je vous donne ma soluce , elle pourra peut etre servir a d'autre:
ma feuille de style:
Code:

1 2 3 4 5 6 7 8 9 .border_bottom a { border:4px solid #FF0000; } .border_no_bottom a { border:4px solid #FF0000; border-bottom:0; }
mon code HTML:
Code:

1 2 3 4 5 6 7 8 9 10 <dl> <dt onMouseOver="javascript:montre('smenu6');" id="smenu6a" class="border_bottom"><a href="#">L'entreprise</a></dt> <dd id="smenu6"> <ul> <li><a href="#">Présentation</a></li> <li><a href="#">Nous Contacter</a></li> <li><a href="#">Recrutement</a></li> </ul> </dd> </dl>
et mon code Javascript:
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 <script type="text/javascript">   </script>
sachant que pour mon code HTML normalement j'ai 7 categorie de menu et donc le chiffre qu'il y a dans smenu6 et smenu6a varie entre smenu1 - smenu1a et smenu7 - smenu7a

bref en faite je c'est pas si mon code ests optimiser ou si j'aurai pas pu faire plus simple mais là en tout cas çà donne exactement le résultat que je voulais

PS: dans la fonction javascript pour ce qui est du test pour le 'close' c'est en faite que j'ai mis aussi un onClick dans le body en appellant cette fonction avec comme parametre close pour justement refermer le sous menu si la personne click ailleurs

Si qlq'un veut plus d'infos la dessus je suis pret a expliquer davantage