使用 JavaScript 设置自定义属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11286661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set custom attribute using JavaScript
提问by Aaron
I am using The DynaTree (https://code.google.com/p/dynatree) but I am having some problems and hoping someone can help..
我正在使用 The DynaTree (https://code.google.com/p/dynatree)，但我遇到了一些问题，希望有人能提供帮助。
I am displaying the tree on the page like below:
我在页面上显示树，如下所示：
<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>
However I am trying to change the icon on a item no matter if it's selected or not only using JavaScript.
但是，我正在尝试更改项目上的图标，无论它是否被选中或仅使用JavaScript。
the new icon I want to use is base2.gif
我要使用的新图标是 base2.gif
I have tried using the following but it don't seem to work:
我尝试使用以下方法，但似乎不起作用：
document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";
anyone know what I might be doing wrong?
有谁知道我可能做错了什么？
回答by 0x499602D2
Use the setAttributemethod:
使用setAttribute方法：
document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");
But you really should be using data followed with a dash and with its property, like:
但是你真的应该使用 data 后跟一个破折号和它的属性，比如：
<li ... data-icon="base.gif" ...>
And to do it in JS use the datasetproperty:
并在 JS 中使用该dataset属性：
document.getElementById('item1').dataset.icon = "base.gif";
回答by Sergej Jevsejev
Please use dataset
请使用数据集
var article = document.querySelector('#electriccars'),
data = article.dataset;
// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"
so in your case for setting data:
所以在你设置数据的情况下：
getElementById('item1').dataset.icon = "base2.gif";
回答by Toastrackenigma
For people coming from Google, this question is not about data attributes - OP added a non-standard attribute to their HTML object, and wondered how to set it.
对于来自 Google 的人来说，这个问题与数据属性无关 - OP 在他们的 HTML 对象中添加了一个非标准属性，并想知道如何设置它。
However, you should not add custom attributes to your properties - you shoulduse data attributes- e.g. OP should have used data-icon, data-url, data-target, etc.
但是，你不应该添加自定义属性你的财产-你应该使用数据属性-例如OP应该使用data-icon，data-url，data-target，等。
In any event, it turns out that the way you set these attributes via JavaScript is the same for both cases. Use:
无论如何，事实证明，您通过 JavaScript 设置这些属性的方式在这两种情况下都是相同的。用：
ele.setAttribute(attributeName, value);
to change the given attribute attributeNameto valuefor the DOM element ele.
将给定的属性attributeName更改value为 DOM 元素ele。
For example:
例如：
document.getElementById("someElement").setAttribute("data-id", 2);
Note that you can also use .datasetto set the values of data attributes, but as @racemic points out, it is 62% slower(at least in Chrome on macOS at the time of writing). So I would recommend using the setAttributemethod instead.
请注意，您还可以使用.dataset来设置数据属性的值，但正如@racemic 指出的那样，它慢了 62%（至少在撰写本文时在 macOS 上的 Chrome 中）。所以我建议改用该setAttribute方法。
