设置数据属性使用JavaScript

Question

我使用的DynaTree（https://code.google.com/p/dynatree），但我有一些问题，并希望有人能帮助..

我显示了树页面像下面的：

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

但是我想，如果它的选择来改变一个项目的图标不管或不仅使用的JavaScript。

的新图标我想用的是base2.gif

我已经尝试使用以下，但它似乎并不工作：

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

谁知道我可能是做错了？

Answer 1

使用setAttribute方法：

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

但你真的应该使用的数据带有一个破折号和其属性，如：

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

而要做到这一点的JS使用dataset物业：

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

Answer 2

请使用数据集

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

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

所以你的情况来设置数据：

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