JS pb setAttribute sur"li"

Attilette
Les bases HTML/CSS

Bonjour,

J'ai un petit souci et je n'arrive pas à trouver la solution malgré plusieurs essais. C'est sans doute très simple. Voici mon problème : à l'affichage de la page je veux mettre en forme le menu en rajoutant une classe aux "li" qui constituent le menu. Si je le fais via la feuille de style, dans les propriétés de l'élément li, ça passe, mais ce n'est pas ce que je veux faire.

Voici le bout de code :

window.onload = function menu(){

    nav = document.getElementById('nav');
    li = nav.getElementsByTagName('li');// pour m'assurer que le style ne s'applique qu'aux éléments li du nav

    li.setAttribute('class','menu_element');

}

Et le CSS correspondant à la classe 'menu_element' 

.menu_element{color:#ffffff;font-weight:bolder;font-size:1.125em;display:inline-block;margin:auto;}

J'ai essayé de plusieurs manières : en parlant au "child" du ul, en m'adressant directement à l'élémént "li" (quitte à ce que la modification affecte toutes les autres listes de la page), rien à faire.

J'ai esssayé avec JQuery, avec "addClass" sur l'élément "li" directement. Même échec.

Si vous avez une idéé... Merci d'avance !

4 réponses

coloo
Réponse acceptée

Reprenons, quand tu fais un li.setAttribute('class','menu_element');
tu demandes d'ajouter une classe sur un array de li.
Tu aurais pu trouver ton erreur en faisant un test sur la première cellule :
li.setAttribute0;

Mon test :

<style>.menu_element{color:red;}</style>
<div id="nav">
<ul>
    <li>ACCUEIL</li>
    <li>COMPETENCES</li>
    <li>REALISATIONS</li>
    <li>PARCOURS</li>
    <li>CONTACT</li>
</ul>
<div>
<script>
var nav=document.getElementById('nav');
var li = nav.getElementsByTagName('li');

var megave=li.length;
for (var ii=0;ii!=megave;ii++) {li[ii].setAttribute('class','menu_element');}
</script>

++

PS : on est dans la section html CSS, il aurait été préférable de mettre ton problème dans jquery :)

coloo

Tu peux mettre la structure html de ton menu svp

Attilette
Auteur

Oui, bien sûr :

<div id="nav">
<ul>
    <li>ACCUEIL</li>
    <li>COMPETENCES</li>
    <li>RÉALISATIONS</li>
    <li>PARCOURS</li>
    <li>CONTACT</li>
</ul>
<div>

Rien de bien compliqué en somme ...

Attilette
Auteur

Zut, et re-zut ! Merci beaucoup. J'avais vaguement pensé à incrémenter tout ça sur les autres éléments, mais je me suis dit "naan, ça peut pas être ça" En tout cas, merci de m'avoir répondu même si je ne suis pas dans la bonne section !