设置数据属性使用JavaScript设置数据属性使用JavaScript(Set data attr

我使用的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";

文章来源: Set data attribute using JavaScript