設置數據屬性使用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";