带有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验证器警察会敲门。但是，您仍然面临与其他库或未来实施竞争的风险。