使用 JavaScript 设置自定义属性

IT技术 javascript dom dynatree
2021-02-12 09:29:45

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

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

3个回答

使用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";
仍然无法通过使用 document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");
2021-03-28 09:29:45
如果只考虑与 HTML5 兼容的浏览器，数据集属性可能很有用，但这是一个简短的列表，需要更广泛的支持来支持通用 Web。我现在坚持使用setAttribute。
2021-03-30 09:29:45
您在代码中到底做了什么让您意识到它不起作用？
2021-03-30 09:29:45
我已经添加了代码并在最后添加了一个警报（所以它会在代码完成时发出警报），而且我还可以看到图标没有改变。（当我删除代码时会看到我的警报显示，所以我知道我刚刚添加的代码有问题。）
2021-03-30 09:29:45
IE <= 8 不支持 setAttribute
2021-04-04 09:29:45

请使用数据集

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

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

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

getElementById('item1').dataset.icon = "base2.gif";
jsperf.com/html5-dataset-vs-native-setattribute这个建议的方法要慢很多
2021-03-17 09:29:45
此外（在适当的情况下），使用驼峰命名法来引用带连字符的名称（带括号的字符串失败）。
2021-03-25 09:29:45

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

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

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

ele.setAttribute(attributeName, value);

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

例如：

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

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

其它你可能感兴趣的问题
上一篇Javascript：在字符串中找到最长的单词 下一篇react useEffect 比较对象