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

Question

J'utilise DynaTree (https://code.google.com/p/dynatree) mais j'ai quelques 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'essaie de changer l'icône d'un élément, qu'il soit sélectionné ou non, en utilisant uniquement la fonction 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-il ce que je fais mal ?

Answer 1

Utiliser le setAttribute mé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 leur propriété, comme par exemple :

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

Et pour le faire en JS, utilisez la fonction dataset propriété :

document.getElementById('item1').dataset.icon = "base.gif";

Answer 2

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 définition des données :

getElementById('item1').dataset.icon = "base2.gif";

Answer 3

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

Cependant, vous ne devez pas ajouter d'attributs personnalisés à vos propriétés. devrait utiliser attributs des données - Par exemple, le PO aurait dû utiliser data-icon , data-url , data-target , etc.

Quoi qu'il en soit, il s'avère que la manière de définir ces attributs via JavaScript est la même dans les deux cas. Utiliser :

ele.setAttribute(attributeName, value);

pour modifier l'attribut donné attributeName à value pour l'élément DOM ele .

Par exemple :

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

Notez que vous pouvez également utiliser .dataset pour 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 l'option setAttribute à la place.