los datos del conjunto de atributos utilizando JavaScript

Question

estoy usando el DynaTree (https://code.google.com/p/dynatree) pero estoy teniendo algunos problemas con la esperanza de que alguien pueda ayudar ..

estoy mostrando el árbol en la página, como a continuación:

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

sin embargo, yo estoy tratando de cambiar el icono de una partida sin importar si se ha seleccionado o no sólo el uso de JavaScript .

el nuevo icono que desea utilizar está base2.gif

He intentado usar el siguiente pero no parece funcionar:

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

Alguien sabe lo que podría estar haciendo mal?

Answer 1

Utilice la setAttribute método:

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

Pero que realmente debería estar utilizando datos siguió con un guión y con su propiedad, como:

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

y hacerlo en JS utilizar el dataset propiedad:

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

Answer 2

Utilice el conjunto de datos

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

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

por lo que en su caso para establecer datos:

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