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

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.

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.

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')

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.

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' );

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.