我可以将自定义属性添加到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
等。
更多信息在这里:
您可以随意添加自定义属性到您的元素。 但是这会使你的文件无效。
在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的控制台中测试以上代码,例如
你可以添加,但是你也必须写一行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>