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

我可以将自定义属性添加到HTML标记,如下所示:<tag myAttri="myVal" />

已邀请:

funde

赞同来自:

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

<tag data-myAttri="myVal" />

riure

赞同来自:

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

nut

赞同来自:

您可以随意向元素添加自定义属性。但这会使您的文档无效。 在HTML 5中,您将有机会使用custom data attributes prefixed with data-

gquia

赞同来自:

jquery data()函数允许您将任意数据与dom元素相关联。 Here's an example

xnobis

赞同来自:

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

esaepe

赞同来自:

您可以从JavaScript设置属性。

document.getElementById("foo").myAttri = "myVal"

frem

赞同来自:

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

document.createElement('tag');
确保一切都到位。我的意思是IE :)

ket

赞同来自:

element.getAttribute('key');
element.setAttribute('key', 'value');

reos

赞同来自:

你可以做这样的事情来从javascript中提取你想要的值 而不是属性

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

gquia

赞同来自:

另一种干净且保持文档有效的方法是将您想要的数据连接到另一个标记中,例如: 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>

homnis

赞同来自:

在HTML5中:是:使用data- attribute

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

wanimi

赞同来自:

这是一个例子:

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的Console中测试上面的代码,例如 JS Console, DevTools in Chrome

xqui

赞同来自:

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
<div id="demo" data-myvar="foo">anything</div>

要回复问题请先登录注册