带有或不带有 data-* 前缀的自定义属性？

Question

HTML5 规范定义了如何使用 data-* 前缀设置自定义属性， 喜欢：

<div data-attr="somedata"></div>

但是如果我们只写会有什么区别：

<div attr="somedata"></div>

实际上我更喜欢第二种方式，因为它更短。
我可以使用getAttribute() 方法访问这两个属性。

那么不使用 data-* 前缀是错误的吗？我只在chrome和IE11上测试过，可能还有其他浏览器需要担心？

Answer 1

HTML5 将data-* 属性定义为有效，而其他自定义属性则无效。那又怎样？

• 如果您通过 HTML 验证器运行代码，它将查找无效属性。除其他外，它们可能表示错字。 HTML5 验证器将接受 data-* 属性，但它不是通灵的。它无法判断哪些其他新属性是计划的一部分。

1234563 data-* 属性免于未来实施。

• 上述结果的一个推论是，包含也会进行任意更改的其他库可能会干扰您自己的代码。

• JavaScript 通过自动将 dataset 属性收集到每个元素的 data-* 属性来与 data-* 属性协作。如果你编造了另一个属性，它将不会被包含在内。

如果以上几点对您来说都不重要，那么请务必使用您喜欢的任何属性名称。关于上面最后一点，您始终可以使用 JavaScript 的 *Attribute 函数访问您自己的任意属性，无论其有效性如何，它都可以很好地处理任何属性。

说到 JavaScript，JavaScript 没有 HTML 有效性的概念，您可以使用 JavaScript 分配您喜欢的任何属性名称，而不必担心 HTML 验证器警察敲门。但是，您仍然冒着与其他库或未来实现竞争的风险。