18

所以我使用的任何自定义数据属性都应该以“data-”开头：

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

如果我忽略这一点，会有什么不好的事情发生吗？IE：

<li class="user" name="John Resig" city="Boston"
     lang="js" food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

我想一件坏事是我的自定义属性可能与具有特殊含义的 HTML 属性（例如，name）发生冲突，但除此之外，仅编写“example_text”而不是“data-example_text”是否有问题？（它不会验证，但谁在乎呢？）

4

2 回答 2

23

保留以 data-* 为前缀的自定义属性有几个好处。

  1. 它保证在以后的版本中不会与 HTML 的扩展发生任何冲突。这是一个在某种程度上已经在 HTML5 中引入的一些新属性遇到的问题，其中现有站点使用具有相同名称的属性并期望不同且不兼容的自定义行为。（例如，已知元素的required属性在过去在一些流行网站上发生过一些冲突）input

  2. 有一个方便的 DOM API，HTMLElement.dataset，用于从脚本访问这些属性。现在大多数浏览器都支持它。

  3. 它们清楚地表明哪些属性是自定义属性，哪些是标准化属性。这不仅通过允许验证器允许具有 data-* 的任何属性同时仍然对其他属性执行有用的错误检查（例如捕获拼写错误）来帮助验证器，它还有助于使源代码的这一方面对阅读它的人来说更加清晰，包括人们谁可以在原作者之后在网站上工作。

于 2010-03-15T23:28:24.480 回答
4

根据John Resig的说法，将这些自定义数据属性添加到 HTML5 sepcs 的全部目的是允许在 HTML 中嵌入自定义数据，同时仍然有效。

如果您不关心验证（并且，正如您所说，您的自定义属性不会与现有的 HTML 属性（如name、id、style等）发生冲突），那么我猜您不必使用data-前缀。但是考虑到这对于编写有效的、兼容的代码来说并不是一个巨大的成本，我不明白你为什么不这样做。

于 2010-03-15T21:44:09.953 回答