Comment ajouter / mettre à jour un attribut à un élément HTML en utilisant JavaScript?
J'essaie de trouver un moyen d'ajouter/de mettre à jour un attribut en utilisant JavaScript. Je sais que je peux le faire avec la fonction setAttribute(), mais cela ne fonctionne pas dans IE.
Vous pouvez lire ici sur le comportement des attributs dans de nombreux navigateurs, y compris IE.
element.setAttribute() devrait faire l'affaire, même dans IE. L'avez-vous essayé? Si cela ne fonctionne pas, alors peut-être que element.attributeName = 'value' pourrait fonctionner.
Ce qui semble facile est en réalité 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 bien sûr des imprévus. Ne fonctionnera pas dans IE avant 8: e.attributes['style'] ne commettra pas d'erreur mais ne définira pas réellement la classe. Ce 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' sans y penser. C'est à cela que servent les attributs setAttribute, createAttribute (à l'exception de l'exception de style d'IE). Mais parce que ce sont vraiment des objets, les choses peuvent devenir confuses.
Puisque vous vous donnez la peine de créer correctement un élément DOM au lieu d'un slop jQuery innerHTML, je le traiterais comme tel et je m'en tiendrais au e.className = 'fooClass' et à l'e.id = 'fooID'. Il s'agit d'une préférence de conception, mais dans ce cas, essayer de traiter est comme si rien ne fonctionnait contre un objet.
Comme les autres méthodes ne se retourneront jamais contre vous, sachez que class est className et style est un objet et que c'est style.width not style = "width: 50px". Rappelez-vous également tagName mais ceci est déjà défini par createElement, vous ne devriez donc pas avoir à vous en préoccuper.
C'était plus long que je ne le voulais, mais la manipulation de CSS dans JS est une affaire délicate.
Obligatoire solution jQuery . Trouve et définit l'attribut title sur foo. Notez que ceci sélectionne un seul élément puisque je le fais par identifiant, mais vous pouvez facilement définir le même attribut sur une collection en modifiant 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 le considérer comme une propriété: vous souhaitez définir un titre sur un élément? element.title = "foo" le fera.
Pour vos propres attributs JS personnalisés, le DOM est naturellement extensible (aka expando = true), ce qui vous permet de faire element.myCustomFlag = foo et de le lire ensuite sans problème.