使用JavaScript设置自定义属性

119

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

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

javascript dom dynatree

— 亚伦
source

关键字data是前缀。您应该使用data-you-attribute-name

— MilkyWayJoe'7

@Aaron您应该选择最佳答案。

— 0x499602D2 '08年

Answers:

202

使用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";

— 0x499602D2
source

如果仅考虑符合HTML5的浏览器，则数据集属性可能会很有用，但这是一个简短列表，并且需要常规Web的广泛支持。我现在坚持使用setAttribute。

— RobG

仍然无法通过使用document.getElementById（'item1'）。setAttribute（'data'，“ icon：'base2.gif'，url：'output.htm'，目标：'AccessPage'，输出： '1'“）;

— 亚伦

您在代码中到底在做什么，使您意识到它不起作用？

— 0x499602D2'2

我已经添加了代码，并在末尾添加了警报（因此，代码完成后会发出警报），并且我还可以看到图标未更改。（当我删除代码时，会看到我的警报显示，所以我知道我刚刚添加的代码有什么问题。）

— Aaron

IE <= 8不支持setAttribute

— RTF

请使用数据集

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

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

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

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

— 谢尔盖·耶夫谢耶夫（Sergej Jevsejev）
source

另外（在适当时），请使用camelCase引用带连字符的名称（括号中的字符串失败）。

— 2540625年

jsperf.com/html5-dataset-vs-native-setattribute此建议的方法要慢很多

— racemic

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

但是，你不应该添加自定义属性你的财产-你应该使用数据属性 -例如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％（至少在撰写本文时在macOS的Chrome中）。因此，我建议改用该setAttribute方法。

— Toastrackenigma
source