Définir un attribut personnalisé à l'aide de JavaScript

119

J'utilise The DynaTree (https://code.google.com/p/dynatree) mais j'ai des problèmes et j'espère que quelqu'un pourra m'aider.

J'affiche l'arbre sur la page comme ci-dessous:

<div id="tree">
        <ul>
            <li class="folder">Outputs
                <ul>
                    <li id="item1" data="icon: 'base.gif', url: 'page1.htm', target: 'AccessPage'">Item 1 Title
                    <li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title
                    <li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title
                    <li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title
                </ul>
        </ul>
    </div>

Cependant, j'essaye de changer l'icône sur un élément, qu'il soit sélectionné ou pas seulement en utilisant JavaScript .

la nouvelle icône que je souhaite utiliser est base2.gif

J'ai essayé d'utiliser ce qui suit mais cela ne semble pas fonctionner:

document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";

quelqu'un sait ce que je pourrais faire de mal?

javascript dom dynatree Aaron
la source
3
le mot data- clé est un préfixe. Vous devriez utiliserdata-you-attribute-name
MilkyWayJoe
6
@Aaron Vous devriez choisir la meilleure réponse.
0x499602D2

Réponses:

202

Utilisez la setAttributeméthode:

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");

Mais vous devriez vraiment utiliser des données suivies d'un tiret et de sa propriété, comme:

<li ... data-icon="base.gif" ...>

Et pour le faire dans JS, utilisez la datasetpropriété:

document.getElementById('item1').dataset.icon = "base.gif";
0x499602D2
la source
9
La propriété de l'ensemble de données peut être utile si seuls les navigateurs compatibles avec HTML5 sont pris en compte, mais il s'agit d'une courte liste et une prise en charge plus large est requise pour le Web en général. Je m'en tiendrai à utiliser setAttribute pour le moment.
RobG
ne peut toujours pas le faire fonctionner en utilisant document.getElementById ('item1'). setAttribute ('data', "icône: 'base2.gif', url: 'output.htm', target: 'AccessPage', sortie: '1'");
Aaron
2
Que faites-vous exactement dans votre code qui vous fait réaliser que cela ne fonctionne pas?
0x499602D2
J'ai ajouté le code et ajouté une alerte à la fin (donc ça va redémarrer quand le code est terminé), et je peux aussi voir l'icône ne pas changer. (lorsque je supprime le code, je vois mon écran d'alart, donc je sais qu'il y a quelque chose qui ne va pas avec le code que je viens d'ajouter.)
Aaron
IE <= 8 ne prend pas en charge setAttribute
RTF
56

Veuillez utiliser l'ensemble de données

var article = document.querySelector('#electriccars'),
    data = article.dataset;

// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"

donc dans votre cas pour la configuration des données:

getElementById('item1').dataset.icon = "base2.gif";
Sergej Jevsejev
la source
1
Aussi (le cas échéant), utilisez camelCase pour faire référence aux noms avec tirets (les chaînes entre crochets échouent).
2540625
6
jsperf.com/html5-dataset-vs-native-setattribute Cette méthode suggérée est beaucoup plus lente
racémique
4

Pour les personnes venant de Google, cette question ne concerne pas les attributs de données - OP a ajouté un attribut non standard à leur objet HTML et s'est demandé comment le définir.

Cependant, vous ne devez pas ajouter des attributs personnalisés à vos propriétés - vous devez utiliser les attributs de données - par exemple , OP aurait dû utiliser data-icon, data-url, data-target, etc.

Dans tous les cas, il s'avère que la façon dont vous définissez ces attributs via JavaScript est la même dans les deux cas. Utilisation:

ele.setAttribute(attributeName, value);

pour changer l'attribut donné attributeNameen valuepour l'élément DOM ele.

Par exemple:

document.getElementById("someElement").setAttribute("data-id", 2);

Notez que vous pouvez également utiliser .datasetpour définir les valeurs des attributs de données, mais comme le souligne @racemic, il est 62% plus lent (au moins dans Chrome sur macOS au moment de la rédaction). Je recommanderais donc d'utiliser la setAttributeméthode à la place.

Toastrackenigma
la source