使用 JavaScript 设置自定义属性

javascript dom dynatree

2022-08-30 04:20:13

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

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

答案 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";

答案 2

请使用数据集

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

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

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

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