131

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

有谁知道我可能做错了什么？

4

3 回答 3

218

使用setAttribute方法：

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");

但是您确实应该使用 data 后跟破折号及其属性，例如：

<li ... data-icon="base.gif" ...>

并在 JS 中使用以下dataset属性：

document.getElementById('item1').dataset.icon = "base.gif";
于 2012-07-02T00:22:29.340 回答
65

请使用数据集

var article = document.querySelector('#electriccars'),
    data = article.dataset;

// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"

所以在你的情况下设置数据：

getElementById('item1').dataset.icon = "base2.gif";
于 2014-05-07T10:34:22.973 回答
20

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

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

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

ele.setAttribute(attributeName, value);

将给定属性更改attributeName为valueDOM 元素ele。

例如：

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

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

于 2020-01-21T05:17:17.680 回答