J'ai un problème bizarre :

Je souhaite changer la couleur du texte de mon menu lors du défilement. Il fonctionne dans JSFiddle et dans la console mais pas dans mon HTML.. .:

Mais changer l'arrière-plan lors du défilement FONCTIONNE !

Le fait est que je dois remplacer un style dans SemanticUI qui utilise !important et je dois utiliser .querySelector().setAttribute() au lieu de .getElementById().style.color car il semble ne pas prendre en charge l'ajout de !important à une couleur.

Voici le lien vers mon projet (j'espère que npm forever restera en ligne assez longtemps...)

Y a-t-il quelque chose qui m'échappe ? Merci d'avance!

1
Cioccoluna 17 mars 2019 à 14:12

2 réponses

Meilleure réponse

Comme mentionné dans la réponse ci-dessus de @taras-d, vous avez deux éléments avec le même identifiant. Si vous souhaitez changer la couleur des deux éléments, vous devez obtenir tous les éléments et leur appliquer du css.

var _activeElements = $(".nav_bar #activeItem");
_activeElements.each(function(index) {
    _activeElements[index].setAttribute('style', 'color: #744a84 !important');
});

Ajoutez une classe factice comme nav_bar à l'élément supérieur pour sélectionner tous les éléments

<div class="right menu nav_bar" id="rightMenu">
...
</div>

Ajoutez la classe nav_bar à un autre élément parent #activeItem, puis elle itérera sur tous les éléments et appliquera css

1
Aquib Iqbal 17 mars 2019 à 12:19

Vous avez deux éléments avec le même identifiant #activeItem

enter image description here

Vous devez mettre à jour le sélecteur pour sélectionner le bon élément :

document.querySelector('#dMenu #activeItem').setAttribute('style', 'color: #744a84 !important');
4
taras-d 17 mars 2019 à 11:35