自定义属性是data- *前缀还是没有？

Question

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

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

但是如果我们写的话会有什么不同：

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

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

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

Answer 1

HTML5将data-*属性定义为有效，而其他自定义属性则不定义。所以呢？

• 如果您通过HTML验证程序运行代码，它将查找无效的属性。除其他外，它们可能表明拼写错误。 HTML5验证器将接受data-*属性，但它不是通灵的。它无法判断哪些其他新属性是计划的一部分。
• 如果您创建一个新属性，它可能无法很好地适应HTML中的未来更改，这可能巧合地使用相同的属性名称用于不同的目的。 data-*属性免于未来的实施。
• 上述的一个必然结果是，包含其他也可以进行任意更改的库可能会干扰您自己的代码。
• JavaScript通过自动在每个元素的data-*属性中收集它们来与dataset属性协作。如果您构成另一个属性，则不会包含该属性。

如果上述各点都不重要，那么，无论如何，请使用您喜欢的任何属性名称。至于上面的最后一点，你总是可以使用JavaScript的*Attribute函数访问你自己的任意属性，这些函数可以很好地适用于任何属性，无论其有效性如何。

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