SetAttribute ne fonctionne pas pour color ??Résolu

Question

Bonjour à tous,

J'ai passé pas mal de temps à chercher sur le net et sur ce site pour trouver une réponse, mais en vain, alors je pose la question.
Voilà le contexte...

J'ai un tableau HTML et le but est de changer la couleur du texte et la couleur du fond de toute une ligne lors de son survol.
Pour ça j'ai une petite fonction Javascript appelée sur les événements onmouseover et onmouseout (ce dernier pour remettre la ligne dans son état initial lorsque la souris n'y est plus).

Cette fonction ressemblait à ça :

function changeAttribute (inElement, inAttribute, inValue) {
    inElement.setAttribute(inAttribute, inValue);
}

Elle fonctionne parfaitement lorsque inAttribute a la valeur "bgColor" par exemple, et inValue mettons "#00FF00".

Le problème se pose pour changer la couleur du texte, si je passe "color" pour inAttribute, ça ne fonctionne plus.
Je n'ai aucune idée de la raison. Je ne comprends pas ce problème. Suis-je à la ramasse ? Y a-t-il une erreur évidente que mes yeux ne voient pas ?

Pour information, j'ai changé la méthode du coup, et la fonction est désormais (il m'a d'ailleurs fallu un peu de temps avant de découvrir comment lui passer le nom de l'attribut à partir du paramètre, jusqu'à ce que je découvre la fonction eval() ) :

function changeAttribute (inElement, inAttribute, inValue) {
    eval('inElement.style.' + inAttribute + ' = "' + inValue + '"');
}

Si l'un de vous a des explications, je suis très preneur, ça comblerait une partie de ma curiosité !

Merci par avance à vous tous.

Bul3 · Accepted Answer

bonjour,

sur tous les navigateurs ?
il faut faire attention, car là aussi, ils ne réagissent 
pas tous de la même manière.
tu es sur de bgcolor ? c'est pas backgroundColor ?
j'ai un gros doute

j'avoue ne plus utiliser à cause de ça, et  je ne me sert
que du element.style.color ou .backgroundColor directement
ça me semble bien plus simple et ça fonctionne toujours 

Cordialement

bw_hades · Answer

Bonjour Bul3.

Je ne peux pas assurer ce comportement sur tous les navigateurs. J'ai testé uniquement sur FireFox 3.0.5 et IE 6.
Par contre, je suis sûr de bgColor.

J'ai continué à investiguer et je crois savoir pourquoi. Bêtement, j'ai initialement pensé que setAttribute modifiait "directement" les styles d'un élément HTML d'un point de vue CSS. Or en fait, il semble que ça touche simplement les attributs d'un point de vue HTML.
C'est pourquoi il s'agit effectivement de bgcolor et non backgroundColor, ni même background-color. 
En effet, sur un élément HTML <tr> on peut semble-t-il trouver l'attribut bgcolor, mais l'attribut color pour modifier la couleur du texte ne fonctionne/n'existe pas/n'estpas reconnu.

En fin de compte, il m'apparaît qu'il est plus propre d'utiliser la syntaxe element.style.* pour modifier vraiment les attributs CSS des éléments HTML.

Merci en tout cas pour ta réponse.

PetoleTeam · Answer

Bonjour à vous, Pour que la méthode setAttribute fonctionne il faut effectivement que l'on passe un attribut existant, ce qui n'est pas le cas de COLOR, ensuite la notion d'attribut porte sur les "attribut" des balises Le texte ici STYLE est un attribut, mais pas width qui est un élément de l'attribut STYLE, donc on ne peut pas l'atteindre directement. Un truc aussi sous IExplorer il est nécessaire de mettre le troisième paramètre à 0 ou à false dans la fonction setAttribute... why? i don't know but ça bug sans ! //------------------------------------- function Change( obj_, attrib_, value_){ obj_.setAttribute( attrib_, value_, 0); } Il est effectivement préférable d'accéder à l'objet style plutôt qu'à l'attribut style difficilement modifiable à partir de setAttribute sauf peut être bidouillage de la chaine de caractère qu'elle représente. ;O)

Bul3 · Answer

PetoleTeam me conforte dans le choix "d'éviter" setAttribute 
 ( salutatoi PetoleTeam )

PetoleTeam · Answer

Salut à toi TheBul3
on peut l'utiliser mais pas seul, avec parcimoni... 
;O)

XtremDuke · Answer

Juste pour info :

Pour ceux et celles qui souhaitent affecter des valeurs à l'attribut STYLE sous forme littérale (exemple: "backgroundColor: #fff; height: 10px") et en passant par SETATTRIBUTE, il est nécessaire de noter que cette affectation est différente sous IE et les autres navigateurs.

Sous IE

monObjet.setAttribute("cssText", valeur);

Autres navigateurs :

monObjet.setAttribute("style", valeur);

bw_hades · Answer

Merci à tous pour les précisions, dont certaines j'avais pu trouver sur le Net ;)

@PetoleTeam : le troisième paramètre de setAttribute, si je ne dis pas de bétise, indique si la méthode doit tenir compte de la casse (du nom de l'attribute à modifier) ou pas.
Par contre, lors de mes tests sous InternetExplorer, je n'ai pas été obligé de passer ce troisème paramètre, sans doute parce que j'entrais directement "bgColor" et non pas "BGCOLOR" ni "bgcolor"...

PetoleTeam · Answer

Bonjour, ----, le troisième paramètre de setAttribute, si je ne dis pas de bêtise, indique si la méthode doit tenir compte de la casse

mais tout à fait... quand je dis... ----, why? i don't know but ça bug sans !

j'exagère quand même un peu, plutôt une incompréhension de ma part sur le comportement de IExplorer, à savoir... Dans toutes les DOCs MicroSoft il est mentionné BGCOLOR Attribute et bgColor Property ce qui pour moi est différent. Dans ces mêmes DOCs il est dit que la méthode setAttribute attend comme 1st paramètre the name of the attribute... ...donc qu'est-il normal de passer ?, BGCOLOR normalement il me semble...et bien NON il faut passer bgColor, la propriété BIZARRE NON!!! Ce comportement est d'autant plus bizarre que pour l'attribut NAME cela ne marche que si l'on passe NAME en majuscule, voir le post http://www.javascriptfr.com/forum/sujet-INNERHTML-IE7_1234397.aspx C'est pour cette raison que je préconise de mettre le 3th paramètre à 0 ou false pour ne pas avoir de soucis. Dans ton cas il existe une autre soluce, la modification de la class, grâce à la propriété className qui est représenté par l'attribute CLASS. ;O)

SetAttribute ne fonctionne pas pour color ??

8 réponses

Votre réponse

Discussions similaires