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

我试图放在一起标记HTML中的各种组件，并通过jQuery脚本解析并在页面加载时创建。将元数据添加到HTML元素的最佳方式

例如，在现阶段，我可以把我的网页下面..

<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>

它并没有那么短，但整洁在我看来，需要较少的解析。麻烦的是，我对“expandos”做了一点研究，我相当确定一些浏览器不喜欢它，它不会被验证。

有人有什么更好的建议吗？

来源

2009-12-17 jonhobbs

我[问了一个类似的问题]（http://stackoverflow.com/questions/1600106/storing-arbitrary-info-in-html-tags-for-javascript）几个月后又好几个很好的答案。还请查看bobince的评论中的链接。 – 2009-12-17 17:28:11

[HTML标记上的非标准属性可能重复。好东西？坏事？你的想法？]（http：// stackoverflow。com/questions/209428/non-standard-attributes-on-html-tags-good-thing-bad-thing-your-thoughts） – 2014-01-31 10:59:35

重复拒绝。 – 2014-01-31 21:34:43

继续操作，为此使用一个属性，但在其上使用前缀data-。所有HTML5元素的前缀为data-的属性为explicitly allowed。例如：

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

今天的作品在所有浏览器（虽然W3验证可能会抱怨其对HTML5的支持是没有完全准备好黄金时间），因为它现在规定的行为，它是面向未来的。

来源

2009-12-17 17:28:50

这是如何与Internet Explorer一起工作的？ – Felix 2010-03-04 16:43:56

@Felix：很好。它几乎适用于任何浏览器，定义自己的属性的唯一真正问题是它导致了验证错误（如果您正在验证），它并没有在任何地方指定（理论上，UA可能忽略它们而不是使它们可用于JS层或CSS，但显然没有），当然还有与新定义的属性相冲突的风险。 HTML5正式化的重要之处在于它一举解决了这些问题。但是你不必等，现在工作得很好，即使是在IE6上。 – 2010-03-05 08:22:54

人们也可以使用这种类的东西。

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

你必须预先定义了很多类，但它并没有感觉比处理，你必须创建每个键值对太多不同。

来源

2009-12-17 17:26:45

使用jquery的“.data”属性。这非常方便，许多人不知道。

请参阅this link了解更多信息。

来源

2009-12-17 17:28:52

谢谢帕特里克。如果你看看我在这里的用户名和那篇文章的名字，你会看到我写了它:) 不幸的是，我需要人们能够标记这些东西在HTML中由jQuery后来解析它必须位于HTML元素的某处，而不是脚本。 – jonhobbs 2009-12-17 17:33:51

太棒了！嘿嘿。 – 2009-12-17 17:57:56

链接说找不到页面！ – Quethzel 2017-04-29 14:28:31

看看jQuery .data()函数。

来源

2009-12-17 17:28:54 micahwittman

**并务必使用粗体** – 2009-12-17 17:34:49

我使用H3，大胆的造型是SO的选择:) – micahwittman 2009-12-17 18:18:52

的Prototype library载体：

element.store("key","value")

和

element.retrieve("key","value")。

简单。尼斯。有效。

来源

2009-12-17 18:01:14

使用xhtml与从另一个DTD混合的自定义元素。或使用html5与custom data- attributes

来源

2009-12-17 18:08:48

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

回答

相关问题