我可以像下面这样向HTML标记添加自定义属性吗?
<tag myAttri="myVal" />
当前回答
是的，您可以使用data-*属性。 data-*属性用于存储页面或应用程序私有的自定义数据。
<ul>
<li data-pageNumber="1"> 1 </li>
<li data-pageNumber="2"> 2 </li>
<li data-pageNumber="3"> 3 </li>
</ul
其他回答
不，这将破坏验证。
在HTML 5中，您可以/将能够添加自定义属性。就像这样:
<tag data-myAttri="myVal" />
下面是例子:
document.getElementsByTagName("html").foo="bar"
下面是另一个如何将自定义属性设置为body tag元素的示例:
document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";
然后读取属性:
attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2
你可以在DevTools的Console中测试上面的代码，例如:
另一种干净的方法是将你想要的数据连接到另一个标签中，例如id，然后使用split来获取你想要的东西。
<html>
<script>
function demonstrate(){
var x = document.getElementById("example data").querySelectorAll("input");
console.log(x);
for(i=0;i<x.length;i++){
var line_to_illustrate = x[i].id + ":" + document.getElementById ( x[i].id ).value;
//concatenated values
console.log("this is all together: " + line_to_illustrate);
//split values
var split_line_to_illustrate = line_to_illustrate.split(":");
for(j=0;j<split_line_to_illustrate.length;j++){
console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
}
}
}
</script>
<body>
<div id="example data">
<!-- consider the id values representing a 'from-to' relationship -->
<input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
<input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
<input id="3:6" type="number" name="quantity" min="0" max="9" value="5">
</div>
<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>
</body>
</html>
使用任何数据，我经常使用它们
<aside data-area="asidetop" data-type="responsive" class="top">
对于自定义元素，添加不带数据前缀的自定义属性似乎很常见。
下面是一个来自HTML标准的例子:自定义元素(注意国家属性):
<flag-icon country="nl"></flag-icon>
另一个来自MDN Web Docs的例子:使用自定义元素(注意l和c属性):
<custom-square l="100" c="red"></custom-square>
