我可以将自定义属性添加到HTML标记吗?

我可以像这样添加自定义属性到HTML标签: <tag myAttri="myVal" />

您可以修改您的!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> ]> 

#IMPLIED表示它是一个可选的参数,或者您可以使用#REQUIRED等。

更多信息在这里:

http://www.w3schools.com/xml/xml_dtd_attributes.asp

您可以随意添加自定义属性到您的元素。 但是这会使你的文件无效。

在HTML 5中,您将有机会使用以data-为前缀的自定义数据属性 。

不,这将打破验证。

在HTML 5中,您可以/将能够添加自定义属性。 像这样的东西:

 <tag data-myAttri="myVal" /> 

jquery data()函数允许您将任意数据与dom元素相关联。 这是一个例子 。

是的,你可以,你在问题本身: <html myAttri="myVal"/>

您可以从JavaScript设置属性。

 document.getElementById("foo").myAttri = "myVal" 
 element.getAttribute('key'); element.setAttribute('key', 'value'); 

在HTML5中:是的:使用数据属性 。

  <ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul> 

这是一个例子:

 document.getElementsByTagName("html").foo="bar" 

这里是另一个例子,如何将自定义属性设置为body标签元素:

 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的控制台中测试以上代码,例如

JS控制台,Chrome中的DevTools

你可以添加,但是你也必须写一行javascript:

 document.createElement('tag'); 

确保一切都落实到位。 我的意思是IE 🙂

另一种方法是清理并保持文档有效,就是将你想要的数据连接成另一个标签,比如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> 
 var demo = document.getElementById("demo") console.log(demo.dataset.myvar) 
 <div id="demo" data-myvar="foo">anything</div> 

你可以做这样的事情来提取你想要的值,而不是一个属性

 <a href='#' class='click'> <span style='display:none;'>value for javascript</span>some text </a>