SetAttribute ne fonctionne pas pour color ?? [Résolu]

bw_hades 5 Messages postés lundi 18 décembre 2006Date d'inscription 25 mars 2009 Dernière intervention - 3 févr. 2009 à 15:25 - Dernière réponse : PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention
- 5 févr. 2009 à 17:28
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.
Afficher la suite 

Votre réponse

8 réponses

Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 3 févr. 2009 à 15:51
+3
Utile
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

Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de Bul3
bw_hades 5 Messages postés lundi 18 décembre 2006Date d'inscription 25 mars 2009 Dernière intervention - 3 févr. 2009 à 16:15
+3
Utile
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.
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de bw_hades
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 3 févr. 2009 à 18:07
0
Utile
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
<TD STYLE="width:200px;">Le
texte</TD>
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)
Commenter la réponse de PetoleTeam
Bul3 4934 Messages postés samedi 1 juillet 2006Date d'inscription 2 février 2015 Dernière intervention - 3 févr. 2009 à 18:27
0
Utile
 PetoleTeam me conforte dans le choix "d'éviter" setAttribute 
 ( salutatoi PetoleTeam )
Commenter la réponse de Bul3
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 3 févr. 2009 à 18:32
0
Utile
Salut à toi TheBul3
on peut l'utiliser mais pas seul, avec parcimoni...
;O)
Commenter la réponse de PetoleTeam
XtremDuke 631 Messages postés samedi 28 septembre 2002Date d'inscription 18 mai 2009 Dernière intervention - 3 févr. 2009 à 18:54
0
Utile
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);
Commenter la réponse de XtremDuke
bw_hades 5 Messages postés lundi 18 décembre 2006Date d'inscription 25 mars 2009 Dernière intervention - 4 févr. 2009 à 09:34
0
Utile
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"...
Commenter la réponse de bw_hades
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 5 févr. 2009 à 17:28
0
Utile
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, 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</td>
</td></tr></tbody></table>mais tout à
fait...

quand je dis...
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, why? i don't know but ça bug sans
!</td>
</td></tr></tbody></table>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)
Commenter la réponse de PetoleTeam

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.