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对象添加了非标准属性，并想知道如何设置它。

但是，您不应该在属性中添加自定义属性-您应使用data attributes-例如OP应该使用data-icon，data-url，data-target等。

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

ele.setAttribute(attributeName, value);

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

例如：

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

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

使用JavaScript设置数据属性

3 个答案: