381

我可以向 HTML 标记添加自定义属性，如下所示？

<tag myAttri="myVal" />
4

18 回答 18

332

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

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

于 2009-11-14T19:14:50.673 回答
196

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

于 2009-11-14T22:15:21.963 回答
82

不，这会破坏验证。

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

<tag data-myAttri="myVal" />
于 2009-11-14T19:08:16.910 回答
33

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

于 2009-11-14T19:23:30.093 回答
25

在 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>
于 2017-04-01T20:11:40.727 回答
19

是的，你可以做到！

有下一个HTML标签：

<tag key="value"/>

我们可以通过以下方式访问它们的属性JavaScript：

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

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

key: 可以是您想要的任何属性名称，但尚未用于当前标签。 value: 它总是一个包含你需要的字符串。

于 2014-08-25T12:55:29.400 回答
11

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

于 2009-11-14T19:11:40.147 回答
10 

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>

于 2017-10-18T22:39:55.210 回答
6

您可以从 JavaScript 设置属性。

document.getElementById("foo").myAttri = "myVal"
于 2009-11-14T22:46:14.187 回答
4

使用 data-any ，我经常使用它们

<aside data-area="asidetop" data-type="responsive" class="top">
于 2019-08-30T06:12:07.873 回答
4

这是示例：

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

于 2017-08-03T12:13:38.073 回答
3

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

<ul>
    <li data-pageNumber="1"> 1 </li>
    <li data-pageNumber="2"> 2 </li>  
    <li data-pageNumber="3"> 3 </li>  
</ul
于 2020-08-20T09:36:55.253 回答
2

出色地！您实际上可以通过将数据属性伪装成您真正想要的内容来创建一堆自定义 HTML 属性。

例如。

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

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

它显然有效，但这会使您的文档无效，除非您必须使用 JScript 来拥有自定义属性甚至元素，否则您只需要像对待您的一样对待您的新公式（自定义）属性“数据”属性

记住“无效”并不意味着什么。该文档将始终正常加载。有些浏览器实际上只会通过 DOCTYPE 的存在来验证您的文档.....，您实际上知道我的意思。

于 2020-05-20T09:43:35.957 回答
1

我可以想到自定义标签的方便用途"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 代码会扫描 DOM 中的所有标签以document.onload()查找 init 属性，评估它们包含的表达式，并将它们分配给包含标签的 innerHTML。这将赋予 HTML 一些 JSP、PHP 等的强大功能。目前我们必须拆分 HTML 标记和照亮它的 JavaScript 代码。错误喜欢拆分代码。

于 2020-10-27T08:01:55.360 回答
1

另一种干净且保持文档有效的方法是将您想要的数据连接到另一个标签（例如 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>
于 2016-12-13T16:36:03.037 回答
0

对于自定义元素，添加不带前缀的自定义属性似乎很常见。data-

这是来自HTML 标准的示例：自定义元素（注意country属性）：

<flag-icon country="nl"></flag-icon>

MDN Web Docs的另一个示例：使用自定义元素（注意l和c属性）：

<custom-square l="100" c="red"></custom-square>
于 2022-02-28T19:09:19.797 回答
-1

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

document.createElement('tag');

以确保一切到位。我的意思是 Internet Explorer :)

于 2012-11-19T09:27:03.727 回答
-9

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

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
于 2015-06-01T06:05:10.097 回答