使用JavaScript设置数据属性

我正在使用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> 

不过，我试图改变项目上的图标，无论是否select或不使用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";