Discussion :

[MoiStéphane]

Bonjour

Je cherche à modifier la couleur d une classe(item) dans une div(navbar).
Je ne maitrise pas vraiment javascript mais selon moi, le code ci après correspond à cela :

Code :

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

document.getElementById('navbar').getElementsByClassName('item').style.color = "green";

Mais j ai le message d erreur suivant que je ne m explique pas (je le comprends mais ne comprends pas pourquoi il ne peut accéder à cette propriété dés lors où elle est déclarée)
Cannot set property 'color' of undefined

Ma classe item est déclarée comme cela:

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
#navbar .item {
    float: left;
    display: block;
    text-align: center;
    color: $white;
    text-decoration: none;
    white-space: nowrap;
    padding: 1.5rem;
    cursor: pointer;
}

et ma page structurée ainsi:

Code html :

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

1
2
3
<div id="navbar">
    <div class="container-nav">        
        <a href="" class="item">le lien</a>

Tous vos commentaires seront les bienvenus.
Merci pour votre aide

[tag9724]

En Javascript element.getElementsByClassName() renverra une liste d'éléments ce qui fait que dans ton ton cas getElementsByClassName('item').style retourneras undefined.

Il faudra à la place faire :

Code :

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

document.getElementById('navbar').getElementsByClassName('item')[0].style.color = "green";

Ou alternativement tu peux aussi sélectionner ton élément avec un element.querySelector()

Code :

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

document.querySelector("#navbar .item").style.color = "green";

[MoiStéphane]

Merci, j ai compris !