使用JavaScript设置数据属性

Question

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

Answer 3

对于来自 Google 的人来说，这个问题与数据属性无关 - OP 在他们的 HTML 对象中添加了一个非标准属性，并想知道如何设置它。

但是，你不应该添加自定义属性你的财产-你应该使用数据属性-例如OP应该使用data-icon，data-url，data-target，等。

无论如何，事实证明，您通过 JavaScript 设置这些属性的方式在这两种情况下都是相同的。用：

ele.setAttribute(attributeName, value);

将给定的属性attributeName更改value为 DOM 元素ele。

例如：

document.getElementById("someElement").setAttribute("data-id", 2);

请注意，您还可以使用.dataset来设置数据属性的值，但正如@racemic 指出的那样，它的速度要慢 62%（至少在撰写本文时在 macOS 上的 Chrome 中）。所以我建议改用该setAttribute方法。