nanoum.net, intégration html/xhtml, css, javascript

javascript

derniers articles

setAttributelundi 07 mars 2005

La fonction setAttribute() permet d'affecter un attribut et sa valeur à un élément ou de modifier un attribut existant.

La syntaxe de cette fonction est la suivante :mon_element.setAttribute("attribut","valeur");

Si la fonction est compatible sous internet explorer et les navigateurs gecko, son utilisation diffère cependant lorsque l'on veut manipuler la classe de l'élément ou les événements qui y sont appliqués.

L'attribut class

Sous firefox par exemple, la modification de l'attribut class se fera de la manière suivante :mon_element.setAttribute("class","maclasse");Internet explorer par contre n'interprètera pas ce code, il lui faudra utiliser className à la place de class.

Pour obtenir un code compatible sous les différents navigateurs, il faudra alors indiquer : mon_element.setAttribute("class","maclasse"); mon_element.setAttribute("className","maclasse"); Il n'est pas nécessaire d'ajouter une détection du navigateur, le code non compris par chacun ne générant pas d'erreur.

Les événements

L'ajout d'événements, comme onclick ou onmouseover par exemple, posera également problème sous ie.

Sous firefox, il suffit d'indiquer : mon_element.setAttribute("onclick","code javascript");Internet explorer n'affichera pas d'erreur de code mais ne l'interprètera pas non plus.
Pour pouvoir affecter un événement sous ie, il faudra alors passer par la notation : mon_element.onclick = nomdefonction; ou alors : mon_element.onclick = function() { code javascript }

Tous les autres attibuts tels que id, align, lang, etc ne posent quant à eux aucun problème et s'utilisent de la même manière selon les différents navigateurs.

L'attribut style

La modification de l'attribut style avec setAttribute fonctionnera sous Firefox par exemple mais pas sous Internet Explorer

Pour Internet Explorer, il faut utiliser une syntaxe un peu particulière avec cssText.

Code fonctionnant sous Firefox, utilisation classique de setAttribute : mon_element.setAttribute("style","color:red;width:200px;");Utilisation avec cssText pour Internet Explorer : mon_element.style.setAttribute("cssText","color:red;width:200px;");

Pour que le code spécifique à IE ne soit pas pris en compte par les autres navigateurs, il convient d'ajouter une condition afin de tester le navigateur : if (document.all) { code pour ie }

29/07/2005 16:40Jean-Francois
Même en utilisant ce formalisme, la valeur de l'attribut est bien modifiée, mais la zone n'est ne clique plus???
31/07/2005 17:24nanoum site
salut
tu pourrais donner un exemple précis ?
11/08/2005 11:09francois
Bonjour.

Je construis un tableau html tel qu'un click sur une ligne réaffiche le tableau dans le même ordre mais avec la ligne de titre placée juste avant la ligne ou l'événement est déclenché.

J'affecte aux lignes de mon tableau un attribut onclick dans une boucle de la façon suivante :
<code>
ligne.setAttribute("onclick","reaffiche("+i+ordre+");");
</code>
i varie dans la boucle

Comment adapter la solution proposée dans l'article pour ie pour créer un attribut dépendant de i ?

Bravo pour la limpidité de vos explications
11/08/2005 12:24nanoum site
salut

tu peux utiliser un code du style :
ligne.onclick = function() {
reaffiche(i+ordre);
}
11/08/2005 15:03francois
J'ai essayé mais voila.
Si le tableau a 12 lignes et que je remplace reaffiche(i+ordre) par alert(i)
ie affiche 11 quelquesoit la ligne sur laquelle je clique : au moment où la fonction reaffiche est appelée, la boucle est arrivée à son terme.
11/08/2005 18:36Fabrice
J'ai le même problème que toi. As-tu trouvé la solution pour un tableau ?
11/08/2005 18:57nanoum site
il faut en fait attacher directement la variable à la ligne
par exemple, si dans ta boucle tu as la var i :
ligne.i = i; ligne.onclick = function() {alert(this.i)};
une page avec un exemple :
http://www.nanoum.net/blog/exemples/setattribute_tableau.htm...
les lignes étant stockées dans un tableau, la première renverra la valeur 0, il suffit d'incrémenter ligne.i de 1 pour avoir la première ligne égale à 0
11/08/2005 21:35francois
Un grand merci
12/08/2005 12:58fabrice
un grand merci aussi, je test ca maintenant.
12/08/2005 13:31fabrice
Voici mon code source :

<html>
<head>
<title>setAttribute et tableaux</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function attach()
{
var eventHandlers = new Array();
for (var i = 1 ; i < 11 ; i++)
{
var element = document.getElementById('ligne' + i);
element.onclick = function() {alert(element.id);};
}

}
window.onload = attach;
</script>
</head>

<body>
<table border="1" cellspacing="0" cellpadding="3">
<tr>
<td id=ligne1>ligne1</td>
<td id=ligne2>ligne2</td>
</tr>
<tr>
<td id=ligne3>ligne3</td>
<td id=ligne4>ligne4</td>
</tr>
<tr>
<td id=ligne5>ligne5</td>
<td id=ligne6>ligne6</td>
</tr>
<tr>
<td id=ligne7>ligne7</td>
<td id=ligne8>ligne8</td>
</tr>
<tr>
<td id=ligne9>ligne9</td>
<td id=ligne10>ligne10</td>
</tr>
</table>
<br>
<input type=button value=event onclick="attach();">
</body>
</html>

Tu sais regarder si tu trouves la solution, j'ai beau chercher je n'y arrive pas. Merci
12/08/2005 13:37nanoum site
dans la ligne :
element.onclick = function() {alert(element.id);};

utilises this.id à la place de element.id pour ton alert()
24/10/2005 18:18efyx
Juste un grand merci ca fais longtemps que je ne trouver pas comment résoudre ce problème
25/10/2005 15:50Shemu site
Nickel !
J'ai résolu mon problème en 10 secondes ! Merci Nanoum de m'éviter à chercher pendant 10 ans dans la doc MSDN !
9/11/2005 12:17kitou
Hello Nanoum
Ton code m'a bien aidé
Une autre maniere de modifier l'attribut class compatible sur firefox et IE

classe = 'actif';
window.document.getElementById('_Onglet' + numeroOnglet).className = 'onglet_' + classe;
window.document.getElementById('_Gauche_Onglet' + numeroOnglet).className = 'gauche_' + classe;
window.document.getElementById('_Milieu_Onglet' + numeroOnglet).className = 'milieu_' + classe;
window.document.getElementById('_Droit_Onglet' + numeroOnglet).className = 'droit_' + classe;
22/11/2005 11:03winnet
Bonjour,

Moi j'ai quelques problemes avec IE, sous Opera et FF mon code fonctionne, en fait j'utilise toujours setAttribute pour definir les valeurs des proprietes des elements HTML mais sous IE ca n'afficher rien, et les valeurs ne sont pas affectees a l'exception des id. Sauriez-vous pourquoi?
PS: j'utilise IE 6.0, Opera 9.0, FF 1.0.7
22/11/2005 11:08winnet
Je rectifie, ca n'affecte pas les valeurs pour la propriete style.
exemple:
item.setAttribute("style","display:inline;top:50px;left:50px;width:100px;height:150px;cursor:hand;");
24/11/2005 11:23nanoum site
effectivement, j'ai oublié d'ajouter cette particularité dans l'article, je corrigerais ça

donc pour ie, item.setAttribute('style','color:red') ne fonctionnera pas

il y a alors 2 solutions pour contrer le problème

définir chaque élément de style séparemment avec :
item.style.color = "red";
item.style.wdth = "200px";
mais cela peut devenir contraignant si l'on a de nombreux éléments de style à définir
cette solution fonctionnera sur tous les navigateurs

autre solution, l'utilisation de cssText :
item.style.setAttribute('cssText','color:red;width:200px');
ceci fonctionnera sous internet explorer uniquement, il ne faudra donc pas oublier de faire une détection de navigateur, avec par exemple :
if (document.all) { code pour ie }
pour que le code ne soit pris en compte que par ie
20/05/2006 08:05Peter site
===IE onclick===
function objGet(x) {return d.getElementById?d.getElementById(x) .all?d.all[x] .layers?d.layers[x]:null;}

var xEvent = "onmousedown";
var xFunction = "h(this,"bbb");";
var x = objGet("aaa");
x[xEvent]=function(){eval(xFunction)};

or
var isIE=(document.all && !window.opera)?1:0;
if (isIE) {x[xEvent]=function(){eval(xFunction)};} //IE
else {x.setAttribute(xEvent,xFunction);} //other

... ("nanoum" example 11/08/2005 1 57)
20/06/2006 20:44Mathcom
La fonction setAttribute ci-après demeure inactive. Pourtant, la fonction getAttribute fonctionne très bien. Seriez-vous le pourquoi de la chose.

function Contactez_Nous()
{
var Image_Source = "../Elements_Cadre/Fichiers_Gif/Contactez_Nous/Contactez_Nous.gif";
var Image_Node;
Fermez_Fenetre_Prec();
window.document.images[Ecran_Centre].src = Image_Source;
Image_Node = document.getElementById("page_initiale_opm");
Image_Node.setAttribute("usemap","contactez_nous");
return false;
}
24/06/2006 15:59hervé
ouf merci, parcourir tant de sites soit disant "spécialisés javascript" sans trouver comment faire, et voici le code qui marche en deux lignes ... vraiment, merci !

Partout on nous explique comment changer les règles css unes par unes, mais pas le plus simple et le plus logique à mettre en oeuvre, changer la valeur de l'attribut class - arf

.
28/09/2006 22:17versgui
Un petit remerciement pour cette astuce qui m'a très bien dépanné
Merci beaucoup.

Commentaires momentanément fermés. Merci de votre compréhension.