使用 JavaScript 设置自定义属性

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

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

209878 次浏览
小开

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

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

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

无论如何，通过 JavaScript 设置这些属性的方法在这两种情况下是相同的。用途:

ele.setAttribute(attributeName, value);

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

例如:

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

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


提交答案