使用 JavaScript 设置自定义属性

Set custom attribute using JavaScript

本文关键字：自定义属性 设置 JavaScript 使用      更新时间：2023-09-26

我正在使用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>
                <li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title</li>
                <li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title</li>
                <li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title</li>
            </ul>
        </li>
    </ul>
</div>

但是，我正在尝试更改项目上的图标，无论它是否被选中或是否仅使用 JavaScript。

我想使用的新图标是base2.gif

我尝试使用以下方法，但似乎不起作用：

document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '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";

请使用数据集

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 应该使用 data-icon 、 data-url 、 data-target 等。

无论如何，事实证明

，通过JavaScript设置这些属性的方式对于这两种情况都是相同的。用：

ele.setAttribute(attributeName, value);

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

例如：

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

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

相关文章：