使用JavaScript设置自定义属性

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

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

使用setAttribute方法：

但您真的应该使用数据，后面加破折号并带有其属性，如：

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

请使用数据集

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

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

因此，在您设置数据的情况下：

getElementById('item1').dataset.icon = "base2.gif";

---

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

但是，您不应该向属性添加自定义属性-您应该使用-例如，OP应该使用数据图标、数据url、数据目标等

在任何情况下，通过JavaScript设置这些属性的方式在两种情况下都是相同的。使用：

ele.setAttribute(attributeName, value);

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

例如：

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

---

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

关键字数据是一个前缀。您应该使用属性中的数据-name@Aaron您应该选择一个最佳答案。如果只考虑符合HTML5的浏览器，则dataset属性可能会很有用，但这只是一个简短的列表，对于通用web来说需要更广泛的支持。我现在坚持使用setAttribute。仍然无法通过使用document.getElementById'item1'。setAttribute'data'，图标：'base2.gif'，url:'output.htm'，目标：'AccessPage'，输出：'1'；你到底在代码中做了什么，使你意识到它不起作用？我已经添加了代码，并在最后添加了一个警报，这样代码完成时它将发出警报，我还可以看到图标没有改变。当我删除代码时，会看到我的alart显示，因此我知道我刚才添加的代码有问题。也就是说，在适当的时候，使用camelCase引用连字符名称和括号中的字符串失败。这个建议的方法要慢得多

getElementById('item1').dataset.icon = "base2.gif";

ele.setAttribute(attributeName, value);

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