使用JavaScript设置自定义属性

Question

我正在使用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方法。