我可以向 HTML 标签添加自定义属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1735230/
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
Can I add a custom attribute to an HTML tag?
提问by lovespring
Can I add a custom attribute to an HTML tag like the following?
我可以将自定义属性添加到如下所示的 HTML 标记中吗？
<tag myAttri="myVal" />
采纳答案by carillonator
You can amend your !DOCTYPE declaration (i.e. DTD) to allow it, so that the [XML] document will still be valid:
您可以修改您的 !DOCTYPE 声明（即 DTD）以允许它，以便 [XML] 文档仍然有效：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ATTLIST tag myAttri CDATA #IMPLIED>
]>
#IMPLIEDmeans it is an optional attribute, or you could use #REQUIRED, etc.
#IMPLIED意味着它是一个可选属性，或者您可以使用#REQUIRED等。
More information is in DTD - Attributes.
更多信息在DTD-Attributes 中。
回答by Gumbo
You can add custom attributes to your elements at will. But that will make your document invalid.
您可以随意为元素添加自定义属性。但这会使您的文档无效。
In HTML 5 you will have the opportunity to use custom data attributes prefixed with data-.
在 HTML 5 中，您将有机会使用以data-.为前缀的自定义数据属性。
回答by carillonator
No, this will break validation.
不，这会破坏验证。
In HTML 5 you can/will be able to add custom attributes. Something like this:
在 HTML 5 中，您可以/将能够添加自定义属性。像这样的东西：
<tag data-myAttri="myVal" />
回答by Draemon
The jQuery data()function allows you to associate arbitrary data with DOM elements. Here's an example.
jQuerydata()函数允许您将任意数据与 DOM 元素相关联。这是一个例子。
回答by Davide Andrea
In HTML5: yes: use the data- attribute.
在 HTML5 中：是：使用data- 属性。
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
回答by luvieere
Yes, you can, you did it in the question itself: <html myAttri="myVal"/>.
是的，你可以，你这样做是在问题本身：<html myAttri="myVal"/>。
回答by IgniteCoders
Yes, you can do it!
是的，你可以做到！
Having the next HTMLtag:
有下一个HTML标签：
<tag key="value"/>
We can access their attributes with JavaScript:
我们可以通过以下方式访问它们的属性JavaScript：
element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter
Element.setAttribute()put the attribute in the HTMLtag if not exist. So, you dont need to declare it in the HTMLcode if you are going to set it with JavaScript.
Element.setAttribute()HTML如果不存在，则将属性放入标签中。所以，HTML如果你要设置它，你不需要在代码中声明它JavaScript。
key: could be any name you desire for the attribute, while is not already used for the current tag.
value: it's always a string containing what you need.
key: 可以是您想要的任何属性名称，而当前标签尚未使用。
value: 它始终是一个包含您需要的字符串。
回答by Jasim Droid
var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar<div id="demo" data-myvar="foo">anything</div>回答by ewg
You can set properties from JavaScript.
您可以从 JavaScript 设置属性。
document.getElementById("foo").myAttri = "myVal"
回答by kenorb
Here is the example:
这是示例：
document.getElementsByTagName("html").foo="bar"
Here is another example how to set custom attributes into body tag element:
这是如何将自定义属性设置到 body 标记元素的另一个示例：
document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";
Then read the attribute by:
然后通过以下方式读取属性：
attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2
You can test above code in Consolein DevTools, e.g.
您可以在 DevTools 的Console中测试以上代码，例如
