我可以添加一个定义属性来HTML标签？

StackOverflow https://stackoverflow.com/questions/1735230

  •  20-09-2019
  •  | 
  •  

题

我可以添加一个定义属性来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等

更多信息可以在 DTD - 属性 的。

其他提示

你可以添加自定属性的要元素。但这会使你的文件无效。

在HTML5你将有机会使用 定义的数据属性的前缀 data-.

没有，这将中断验证。

在HTML 5可以/将能够添加自定义属性。是这样的：

<tag data-myAttri="myVal" />

jQuery的data()功能可以将任意数据与DOM元素相关联。 下面是一个例子。

在HTML5：是：使用 DATA-属性 

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

是的，你可以，你这样做是在问题本身。<html myAttri="myVal"/>

可以从JavaScript设置属性。

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


var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar
<div id="demo" data-myvar="foo">anything</div>

是，你可以做到这一点！

具有下一HTML标记：

<tag key="value"/>

我们可以用JavaScript访问他们的属性：

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

Element.setAttribute()把属性在HTML标签如果不存在。所以，你不需要声明它在HTML代码，如果你要与JavaScript设置。

key：可能是你的属性想要的任何名称，而尚未用于当前标签。 value：它总是包含你所需要的字符串

下面是示例：

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

下面是另一个示例如何设置自定义属性插入身体标记元素：

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测试上面的代码中的控制台，e.g。

“JS控制台，在Chrome

另一种方法，这是干净的，将保持文档有效的，是你想要的数据连接成另一个标记例如ID，然后用拆分带你想要什么，当你想要它。 

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

您可以添加，但你必须写一行JavaScript代码也一样，

document.createElement('tag');

，以确保一切下降到位。我的意思是Internet Explorer中：）

使用的数据的任何，我使用它们大量

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

您可以做这样的事情来提取您从JavaScript想要的值，而不是一个属性：

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top