Comment ajouter/mettre à jour un attribut à un élément HTML à l'aide de JavaScript?

J'essaie de trouver une manière qui va ajouter /mettre à jour l'attribut à l'aide de JavaScript. Je sais que je peux le faire avec setAttribute() fonction, mais qui ne fonctionne pas dans IE.

InformationsquelleAutor dev.e.loper | 2009-04-02
  1. 159

    Vous pouvez lire ici sur le comportement des attributs dans la plupart des navigateurs, y compris IE.

    element.setAttribute() devrait faire l'affaire, même dans IE. Avez-vous l'essayer? Si cela ne fonctionne pas, alors peut-être
    element.attributeName = 'value' pourrait fonctionner.

    • les travaux de cette. il crée l'attribut si il n'existe pas et les mises à jour si elle n'existe pas. est-ce documenté quelque part, autant que la façon dont cela fonctionne?
    • par "ce qui fonctionne", je veux dire de l'élément.nom de l'attribut = "valeur"
    • DOM spec est un bon endroit pour commencer: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/...
    • Quand je fais le suivant: document.getElementById("nav").setAttribute("class", "active"); il fonctionne dans le Chrome JS console, mais dans la page en question, il ne fonctionne pas..des idées? Par ailleurs, dans la page en question, je comprennent le .js fichier avant la fin de la body portée.
    InformationsquelleAutor andi
  2. 35

    Ce qui semble facile, c'est effectivement difficile si vous voulez être complètement compatible.

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

    Disons que vous avez un id de 'div1' ajouter. 

    e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

    Ce seront tous les travaux à l'exception de la dernière dans IE 5.5 (qui est l'ancienne histoire à ce point, mais est toujours XP par défaut avec pas de mises à jour).

    Mais il y a des imprévus, bien sûr.
    Ne fonctionne pas dans IE avant 8:e.attributes['style']
    Ne sera pas d'erreur, mais ne pas la classe, il faut className:e['class'] .

    Toutefois, si vous utilisez des attributs de ce travail:e.attributes['class']

    En résumé, pensez attributs comme littéral et orienté objet.

    Dans le sens littéral, vous avez juste envie de cracher x='y' et ne pas y penser. C'est ce que les attributs, les setAttribute createAttribute est pour (sauf pour IE style de l'exception). Mais parce que ce sont vraiment des objets de choses peuvent se confondre.

    Puisque vous êtes la peine de bien la création d'un élément du DOM au lieu de jQuery innerHTML la pâtée, je voudrais le traiter comme un et le bâton avec l'e.className = 'fooClass' et e.id = 'fooID'. C'est une conception de préférence, mais dans ce cas, essayer de traiter est autre chose qu'un objet travaille contre vous.

    Il ne sera jamais se retourner contre vous, comme les autres méthodes, juste être conscient de la classe nom de la classe et le style d'un objet de style.largeur de pas style="width:50px". Rappelez-vous aussi tagName mais c'est déjà définie par createElement de sorte que vous ne devriez pas besoin de s'inquiéter à ce sujet.

    Ce fut plus long que ce que je voulais, mais CSS manipulation en JS est un travail délicat.

    • Windows XP est sorti avec IE6, pas 5.5. Ce serait terrible.
    • Cela fonctionne avec id, pas avec autre chose comme data-toggle
    InformationsquelleAutor JPearce
  3. 29

    Obligatoire jQuery solution. Détecte et définit la title attribut foo. Remarque cette option sélectionne un élément unique depuis que je suis en train de faire par id, mais vous pouvez facilement définir l'attribut même sur une collection en modifiant le sélecteur.

    $('#element').attr( 'title', 'foo' );
    • +1 pour jQuery solution. Dans mon cas, j'essayais d'éviter de jQuery et de le produire en javascript et en raison des exigences de mon travail. Je suis content que les deux réponses existent. Merci.
    InformationsquelleAutor tvanfosson
  4. 7

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

    La plupart du temps, vous pouvez simplement l'adresse comme une propriété: envie de mettre un titre sur un élément? element.title = "foo" va le faire.

    Pour votre propre JS attributs de la DOM est naturellement extensible (aka expando=true), la simple conséquence est que vous pouvez faire element.myCustomFlag = foo et par la suite le lire sans problème.

    InformationsquelleAutor annakata