最佳方法将元数据添加到HTML元素

Question

我正在尝试创建一种在HTML中标记不同组件的方法，这些组件将在页面加载时由jQuery脚本解析并创建。

举个例子，目前我可以在我的页面中添加以下内容：

<a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth">This is a button</a>

当 jQuery 脚本找到它时，它将注入必要的 HTML，以创建一个带有图标的按钮和所有必要的事件等。

然而，这样做很混乱，需要使用很多长长的类名。我更愿意像这样做...

<a href="#" class="Theme-Button" data="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

在我看来，它并没有缩短多少，但更加简洁，并且需要较少的解析。问题是，我对“扩展属性”做了一些调研，我相当确定有些浏览器不会喜欢它，而且它也无法验证。

有人有更好的建议吗？

- jonhobbs

---

我几个月前提出了类似的问题，并得到了一些好的答案。还可以查看bobince评论中的链接。 - Pekka

可能是[HTML标签上的非标准属性。好事？坏事？你的想法？]的重复问题。(https://dev59.com/M3VC5IYBdhLWcg3wsTfv) - Ciro Santilli OurBigBook.com

Answer 1

使用属性来实现此功能，但在其前缀上使用"data-"。具有"data-"前缀的属性在HTML5中明确允许用于所有元素。例如：

<a href="#" class="Theme-Button" data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

现在所有浏览器都支持它，而且因为它是指定行为，所以它具有未来的兼容性。

- T.J. Crowder

---

@Felix：完全没有问题。它可以使用任何浏览器，自定义属性的唯一真正问题是它会导致验证错误（如果您正在进行验证），并未在任何地方指定（因此理论上，用户代理可能会忽略它们并不将它们提供给JS层或CSS，尽管显然没有）。当然，还存在与新定义属性冲突的风险。HTML5 正式化解决了这些问题。但是您不必等待，现在即可使用，甚至在 IE6 上也能很好地工作。 - T.J. Crowder

Answer 2

使用jQuery的“.data”属性非常方便，但很多人并不知道它。请参见此链接获取更多信息：http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip14。

- Patrick Karcher

---

谢谢Patrick。如果您查看我的用户名和那篇文章的名称，您会发现是我写的 :)不幸的是，我需要让人们能够在HTML中标记这些内容，以便稍后由jQuery解析，因此它必须在HTML元素中的某个位置，而不是在脚本中。 - jonhobbs

链接显示页面未找到！ - Quethzel Díaz

Answer 3

Prototype库支持以下功能： element.store("key","value") 和 element.retrieve("key","value")。

简单易用，高效实用。

- Diodeus - James MacFarlane

Answer 4

看看jQuery .data()函数。

- micahwittman

---

请确保始终使用粗体 - T.J. Crowder

我使用了H3，加粗的样式是SO的选择 :) - micahwittman

Answer 5

对于这种事情，人们也可以使用类。

<a href="#" class="Theme-Button Style-win2007 Icon-left Align-Center FullWidth"></a>

你需要预定义很多类，但这并不感觉比创建每个键值对更麻烦。

- Matthew Vines

Answer 6

使用包含另一个 DTD 中自定义元素的 XHTML。或者使用 HTML5，其中包含 自定义data-属性。

- just somebody