Comment ajouter / mettre à jour un attribut à un élément HTML en utilisant JavaScript?


128

J'essaie de trouver un moyen d'ajouter / de mettre à jour l'attribut en utilisant JavaScript. Je sais que je peux le faire avec la setAttribute()fonction, mais cela ne fonctionne pas dans IE.

Réponses:


163

Vous pouvez lire ici sur le comportement des attributs dans de nombreux navigateurs différents, y compris IE.

element.setAttribute()devrait faire l'affaire, même dans IE. Est-ce que tu l'as essayé? Si cela ne fonctionne pas, cela element.attributeName = 'value'pourrait peut- être fonctionner.


5
cela marche. il crée un attribut s'il n'existe pas et le met à jour s'il existe. est-ce documenté quelque part dans la mesure où cela fonctionne?
dev.e.loper

@ dev.e.loper DOM spec est un bon point de départ: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…
valentinas

1
Quand je fais ce qui suit: document.getElementById("nav").setAttribute("class", "active");cela fonctionne dans la console Chrome JS, mais dans la page actuelle, cela ne fonctionne pas .. des idées? À propos, dans la page réelle, j'inclus le .jsfichier avant la fin de la bodyportée.
knownasilya

36

Ce qui semble facile est en fait délicat si vous voulez être complètement compatible.

var e = document.createElement('div');

Disons que vous avez un identifiant de «div1» à ajouter.

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
Ceux-ci fonctionneront tous sauf le dernier dans IE 5.5 (qui est de l'histoire ancienne à ce stade mais qui est toujours par défaut de XP sans mises à jour).

Mais il y a des contingences, bien sûr. Ne fonctionnera pas dans IE avant 8: e.attributes['style'] ne l' erreur , mais ne sera pas mis en fait la classe, il doit être className: e['class'].
Cependant, si vous utilisez des attributs, cela fonctionnera:e.attributes['class']

En résumé, considérez les attributs comme littéraux et orientés objet.

En littéral, vous voulez juste qu'il crache x = 'y' et ne pas y penser. C'est à cela que servent les attributs, setAttribute, createAttribute (à l'exception de l'exception de style d'IE). Mais comme ce sont vraiment des objets, les choses peuvent devenir confuses.

Puisque vous allez vous donner la peine de créer correctement un élément DOM au lieu de jQuery innerHTML slop, je le traiterais comme un élément et m'en tenir à e.className = 'fooClass' et e.id = 'fooID'. Il s'agit d'une préférence de conception, mais dans ce cas, essayer de traiter est comme autre chose qu'un objet fonctionne contre vous.

Cela ne vous retournera jamais comme les autres méthodes, sachez simplement que la classe est className et que le style est un objet, donc c'est style.width et non style = "width: 50px". Souvenez-vous également de tagName, mais il est déjà défini par createElement, vous ne devriez donc pas vous en préoccuper.

C'était plus long que je ne le souhaitais, mais la manipulation CSS dans JS est une affaire délicate.


5
Windows XP est sorti avec IE6, pas 5.5. Ce serait terrible.
mgol

Cela fonctionne avec id, pas avec quelque chose d'autre commedata-toggle
stallingOne

30

Solution jQuery obligatoire . Recherche et définit l' titleattribut sur foo. Notez que cela sélectionne un seul élément puisque je le fais par id, mais vous pouvez facilement définir le même attribut sur une collection en changeant le sélecteur.

$('#element').attr( 'title', 'foo' );

3
+1 pour la solution jQuery. Dans mon cas, j'essayais d'éviter jQuery et de le produire en javascript pur en raison des exigences de mon travail. Je suis content que les deux réponses existent. Merci.
NuclearPeon

7

Que voulez-vous faire avec l'attribut? Est-ce un attribut html ou quelque chose de votre choix?

La plupart du temps, vous pouvez simplement l'adresser comme une propriété: vous voulez donner un titre à un élément? element.title = "foo"le fera.

Pour vos propres attributs JS personnalisés, le DOM est naturellement extensible (aka expando = true), le simple résultat est que vous pouvez le faire element.myCustomFlag = fooet le lire ensuite sans problème.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.