Question

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

Answer 1

您可以随意向元素添加自定义属性。但这会使您的文档无效。

在HTML 5中，您将有机会使用custom data attributes prefixed with data-。

Answer 2

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

Answer 3

不，这会破坏验证。

在HTML 5中，您可以/将能够添加自定义属性。像这样：

<tag data-myAttri="myVal" />

Answer 4

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

Answer 5

在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>

Answer 6

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

Answer 7

您可以从JavaScript设置属性。

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

Answer 8

＆＃13;

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar

＆＃13;

<div id="demo" data-myvar="foo">anything</div>

＆＃13;

Answer 9

您可以使用JavaScript以原生方式执行此操作：

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter

Answer 10

以下是示例：

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 中测试上述代码，例如

Answer 11

好！您实际上可以通过伪装数据属性来创建一堆自定义HTML属性。

例如

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

它显然有效，但是那会使您的文档无效，除非需要，否则无需使用JScript来拥有自定义属性甚至元素，您只需要以相同的方式对待新的Formulated（custom）属性即可。您对待“数据”属性

记住“无效”没有任何意义。该文档将始终加载正常。而且某些浏览器实际上仅通过DOCTYPE的存在来验证您的文档.....，您实际上知道我的意思。

Answer 12

使用数据-任何，我经常使用它们

<aside data-area="asidetop" data-type="responsive" class="top">

Answer 13

我可以想到自定义标签"init"的便捷用法。包括一个JavaScript表达式，该表达式会在document.onLoad()时进行评估，并提供标记的值，例如

<p>&lt;p&gt;The UTC date is &lt;span init="new Date().toUTCString()"&gt;?&lt;/span&gt;.&lt;p&gt;</p>

一些样板JavaScript代码会在document.onload()时扫描DOM中的所有标签，以查找init属性，评估它们包含的表达式，并将它们分配给包含标签的innerHTML。这将使HTML具有JSP，PHP等的某些功能。当前，我们必须拆分HTML标记和阐明它的JavaScript代码。虫子喜欢拆分代码。

Answer 14

是的，您可以使用data-*属性。 data-*属性用于存储页面或应用程序专用的自定义数据。

<ul>
    <li data-pageNumber="1"> 1 </li>
    <li data-pageNumber="2"> 2 </li>  
    <li data-pageNumber="3"> 3 </li>  
</ul

Answer 15

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

Answer 16

你可以添加，但是你也必须写一行javascript：

document.createElement('tag');

确保一切都到位。我的意思是IE：）

Answer 17

您可以执行以下操作，从javascript中提取所需的值而不是属性

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

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

17 个答案: