提问人：Pekka 提问时间：10/21/2009 最后编辑：Crescent FreshPekka 更新时间：12/4/2009 访问量：3287
在 JavaScript 的 HTML 标记中存储任意信息？
Storing arbitrary info in HTML tags for JavaScript?
问：
一个非常笼统的问题。
我正在使用 HTML / JavaScript 动态生成一个表单，该表单被拆分为多个级别的选项卡。
我想使用 CSS 和 background-image 用星号 * 符号突出显示一些字段（那些值与全局模板不同的字段）。
JS 字段遍历每个字段，比较其值，并在必要时为其设置 CSS 类。目前为止，一切都好。
此外，我不仅希望每个更改的字段都标有星号，还希望它所在的选项卡。
因为我喜欢它简单，所以我想将选项卡的元素 ID 存储为每个字段的 HTML 标记（类似于“parentTab”）中的某个属性。然后，JS 函数突出显示该字段及其“parentTab”元素（可能还有该元素的“parentTab”）。
我的第一种方法是滥用“title”属性或 somethiong 来存储 parentTab。当然，这很脏。但是，如果我只是随意地向 DIV 或 INPUT 标签添加任意属性，它将不再验证，并且我觉得访问这些属性不太安全 - 谁知道不同的浏览器如何处理它，并且将来会如何处理它？
所以我的问题是：有没有一种有效的、符合标准的方法——某种属性——将任意数据存储在 HTML 标签中，以便由 JavaScript 进一步处理？
当然，我可以创建一个“parentTabs”JS数组并完成它。但是将其存储在输入本身中会更加优雅。
答：
22赞
peirix
10/21/2009
#1
随着 HTML5 的引入，您可以使用以 data- 开头的属性，并且它们仍将进行验证。
<input type="text" name="username" data-parentTab="tab1" value="non-default">
评论
1赞
cletus
10/21/2009
嗯，这对于拥有支持 HTML5 的浏览器的 5-10% 的人口来说非常有用。
2赞
T.J. Crowder
10/21/2009
点对点。@OP：即使规范尚未完成，您也可以立即开始使用它。只需将您的 doctype 声明更改为（这就是整个事情;HTML5 使文档类型更容易记住）。<DOCTYPE HTML>
4赞
peirix
10/21/2009
@cletus：对于较旧的浏览器来说，这无关紧要，因为除了保存信息之外，它实际上什么都不做。这在 IE6 中可以正常工作。它只是不会验证为 XHTML 或 HTML4......
1赞
T.J. Crowder
10/21/2009
@cletus：不是这样，非HTML5浏览器通常会忽略它们不理解的属性，所以你现在就可以使用这种技术，因为它是面向未来的。这里有一些很好的阅读：ejohn.org/blog/html-5-data-attributes
1赞
Chris
12/29/2011
@T.J.Crowder，它是<!DOCTYPE html> ;-)
2赞
Ben James
10/21/2009
#2
您可以通过编写 isChildOf 函数来找出字段属于哪个选项卡式元素，如下所示： http://jimkeller.blogspot.com/2008/07/jquery-ischildof-is-element-child-of.html
使用 DOM 来解决这个问题总是比以某种自定义格式复制数据更“优雅”。
评论
0赞
peirix
10/21/2009
不过，这需要jQuery......但是，如果没有jQuery，这也应该相当容易。
0赞
Pekka
10/21/2009
“使用 DOM 来解决这个问题总是比以某种自定义格式复制数据更'优雅'。”我现在可能会选择“rel”属性，因为它做起来太快了;从长远来看，DOM 方法是正确的。
1赞
Tzury Bar Yochay
10/21/2009
#3
在jQuery中，你有数据API。http://docs.jquery.com/Internals/jQuery.data
如果您不使用 jQuery，您可以添加自己的标签并在其中存储任何内容。 每个人都会告诉你这不好，但所有伟大的网络公司都在这样做。所以你最终会进入一家伟大的公司;-）
2赞
Alex Sexton
10/21/2009
#4
对于存储此类数据，该属性通常是一个很好的有效选择。rel
评论
0赞
Pekka
10/21/2009
没错，我现在会接受它。尽管如此，这是对属性的公然滥用，我一直在寻找解决该:)的方法
0赞
Jaanus
12/4/2009
#5
我喜欢 John Resig 的做法：一个任意类型的脚本标签。他的例子是关于模板的，但你真的可以用它来做任何事情。
上一个：如何以有效的方式添加非标准属性
评论